@keyframes flip-card {
    to {
        transform: rotateY(180deg);
    }
}

.tarot-card--flip-automatically .tarot-card__content {
    animation: flip-card 800ms 2s forwards;
}

.tarot-card--flip-on-hover {
    perspective: 1000px;
}

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

.tarot-card--flip-on-hover .tarot-card__content,
.tarot-card--flip-automatically .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);
}