.emts-flipbox {
    width: 100%;
    height: auto;
    position: relative;
}

.emts-flipbox.flipbox-3d {
    perspective: 1200px;
}

.flipbox-inner {
    position: relative;
    display: grid;
    width: 100%;
    height: 100%;
    transition: transform 0.6s ease-in-out;
    transform-style: preserve-3d;
}

/* Horizontal Flip */
.flipbox-horizontal:hover .flipbox-inner {
    transform: rotateY(180deg);
}

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

/* Vertical Flip */
.flipbox-vertical:hover .flipbox-inner {
    transform: rotateX(180deg);
}

.flipbox-vertical .flipbox-back {
    transform: rotateX(180deg);
}

.flipbox-front, 
.flipbox-back {
    grid-area: 1/-1;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: inline-grid;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    background: #f3f3f3;
}

.flipbox-back {
    background: #444;
    color: white;
}