.card {
  perspective: 1400px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  width: min(92vw, 800px);
  aspect-ratio: 1400 / 1055;
}

@media (orientation: portrait) {
  .card {
    width: min(92vw, 480px);
    aspect-ratio: 941 / 1672;
  }
}

.card-inner {
  transform-style: preserve-3d;
  transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
}

.card-inner picture {
  display: contents;
}

.card.is-flipped .card-inner {
  transform: rotateY(180deg);
}

.card-face {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: #f3eee8;
  object-fit: cover;
}

.card-face--back {
  transform: rotateY(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .card-inner {
    transition: none;
  }
}

.hint {
  opacity: 0;
  transition: opacity 300ms ease-out;
}

.hint.is-visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hint {
    transition: none;
  }
}