card_box.pcss

.flip-card {
  &.prose :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
  }

  &.prose :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }

  @apply w-auto h-[33rem] cursor-pointer;

  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner, .flip-card:focus .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the back side */
.flip-card-back {
  transform: rotateY(180deg);
}