.yogo-thumb {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

.yogo-thumb--wide {
  width: 88px;
}

.yogo-preview {
  display: block;
  width: min(320px, 100%);
  max-height: 320px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(50, 20, 15, .14);
}

.yogo-preview--wide {
  width: min(560px, 100%);
  aspect-ratio: 16 / 9;
}

.yogo-no-photo {
  display: inline-block;
  padding: 5px 7px;
  color: #735f59;
  background: #f3ebe7;
  border-radius: 6px;
  font-size: 11px;
}

.yogo-color {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 7px;
  vertical-align: middle;
  border-radius: 50%;
  background: var(--color);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #c9bbb4;
}