.flip-container {
     perspective: 1200px;
     width: 100%;
     height: 100%;
     position: relative;
 }

/* Desktop - maintain fixed height and 3D flip behavior */
@media (min-width: 1200px) {
    .flip-container {
        min-height: 1675px;
    }
    
    .flip-container .front,
    .flip-container .back {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        transition: transform 0.6s;
    }

    .flip-container .front {
        z-index: 2;
        transform: rotateY(0deg);
    }

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

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

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

/* Tablet and Mobile - dynamic height with simplified flip behavior */
@media (max-width: 1199px) {
    .flip-container {
        min-height: auto;
        height: auto;
    }
    
    .flip-container .front,
    .flip-container .back {
        position: relative;
        width: 100%;
        height: auto;
        min-height: auto;
        backface-visibility: visible;
        transition: none;
        transform: none;
    }
    
    .flip-container .front {
        z-index: 2;
        display: block;
    }
    
    .flip-container .back {
        display: none;
    }
    
    .flip-container.flipped .front {
        display: none;
    }
    
    .flip-container.flipped .back {
        display: block;
    }
}