.card-flip {
    perspective: 1000px;
    width: 100%;
    max-width: 350px;
    height: auto;
    aspect-ratio: 1064 / 1300;
    position: relative;
    margin: 0 auto;
    cursor: pointer;
}

.card-front, .card-back {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    transition: transform 0.6s;
}

.card-front {
    transform: rotateY(0deg);
}

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

.card-flip.flipped .card-front {
    transform: rotateY(180deg);
}

.card-flip.flipped .card-back {
    transform: rotateY(0deg);
}