body {
  font-family: system-ui, sans-serif;
  margin: 2rem;
}

.flip-card {
  width: 200px;
  height: 120px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

@media (prefers-reduced-motion: no-preference) {
  .flip-card-inner {
    transition: transform 0.6s;
  }
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  display: grid;
  place-items: center;
  border-radius: 0.5rem;
  color: #fff;
}

.flip-card-front {
  background: #30a6e6;
}

.flip-card-back {
  background: #222;
  transform: rotateY(180deg);
}