/* Image containers */
.image-container, .video-container {
    border-radius: 12px;
    overflow: hidden;
}
.image-container {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3; /* replaces padding-bottom hack */
    border-radius: 12px;
    overflow: hidden;
}
.before-image, .after-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.after-image { opacity: 0; }
.image-container:hover .after-image { opacity: 1; }
.image-container.active .after-image { opacity: 1; }

/* Video */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
}
.video-container video {
    position: absolute;
    width: 100%; height: 100%;
    inset: 0;
    object-fit: cover;
}

/* Play button */
.play-button {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 56px; height: 56px;
    border-radius: 50%;
    background-color: rgba(17,24,39,0.6);
    display: flex; align-items: center; justify-content: center;
    transition: 0.2s ease-in-out;
    z-index: 10;
}
.play-button svg { width: 30px; height: 30px; color: white; }
.play-button:hover { background-color: rgba(17,24,39,0.85); }