:root {
    --min-flip-card-height: 80vh;
}

.tarot-card--flip-on-hover {
    min-height: var(--min-flip-card-height);
    perspective: 1000px;
}

.tarot-card--flip-on-hover:hover .tarot-card__content {
    transform: rotateY(180deg);
}

.tarot-card--flip-on-hover .tarot-card__content {
    transition: transform 800ms;
    transform-style: preserve-3d;
}

.tarot-card__side {
    position: absolute;

    width: 100%;
    height: 100%;

    backface-visibility: hidden;
}

.tarot-card__side--back {
    transform: rotateY(180deg);
}