/* Main flipbox wrapper */
.flip-box-block {
    position: relative;
    width: 100%;
    background-color: transparent;
    perspective: 10000px;
    margin-bottom: 1.5em; /* Prevent overlap with other blocks */
    min-height: 200px; /* Minimum height */
    display: block;
}

/* Container for 3D transform */
.flip-box-block-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 1s;
}

/* Front and back sides - positioned absolutely for 3D effect */
.flip-box-block-front,
.flip-box-block-back {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Front side - visible by default */
.flip-box-block-front {
    position: relative; /* Allow it to set the height */
    transform: rotateY(0deg);
    z-index: 2;
}

/* Back side - absolutely positioned, hidden behind */
.flip-box-block-back {
    position: absolute;
    height: 100%; /* Match front side height */
    transform: rotateY(180deg);
}

/* Inner content wrappers */
.flip-box-block-front-inner,
.flip-box-block-back-inner {
    width: 100%;
    display: block;
    padding: 20px;
    box-sizing: border-box;
}

/* Make sure images don't overflow */
.flip-box-block-front img,
.flip-box-block-back img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Hover trigger - flip the inner container */
.flip-box-block:hover .flip-box-block-inner {
    transform: rotateY(180deg);
}

/* Click trigger - flip the inner container */
.flip-box-block.is-flipped .flip-box-block-inner {
    transform: rotateY(180deg);
}