.flashcard {
  transform-style: flat;
  transition: filter 0.22s ease;
}

.flashcard.flipped {
  transform: none;
}

.flash-face {
  transition:
    opacity 0.22s ease,
    visibility 0.22s ease,
    transform 0.34s cubic-bezier(0.2, 0.9, 0.2, 1);
}

.flash-front-face {
  opacity: 1;
  visibility: visible;
  transform: rotateY(0deg);
}

.flash-back-face {
  opacity: 0;
  visibility: hidden;
  transform: rotateY(12deg);
}

.flashcard.flipped .flash-front-face {
  opacity: 0;
  visibility: hidden;
  transform: rotateY(-12deg);
  pointer-events: none;
}

.flashcard.flipped .flash-back-face {
  opacity: 1;
  visibility: visible;
  transform: rotateY(0deg);
  pointer-events: auto;
}