/* image to video styling */
.js-media-hover {
    /*aspect-ratio: 1 / 1;*/
    display: flex;
    align-items: stretch;
    justify-content: center;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    /* background: #000;               fallback while loading */
    padding: 0; /* ensure no inner gap shows */
    margin: 0;
    border-radius: 10px;
}

/* keep the image stretched to fill exactly the same box as the absolute video */
.js-media-hover > img,
.js-media-hover img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* critical: same behavior as video */
    object-position: center center !important;
    align-self: stretch !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    user-select: none;
    -webkit-user-drag: none;
    z-index: 1;
}

/* Video overlay (unchanged) */
.js-media-hover video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    opacity: 0;
    transition: opacity 250ms ease;
    z-index: 2;
    will-change: opacity, transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    pointer-events: none;
}

/* Optional click-capture overlay if you need click/tap handling */
.js-media-hover .media-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: transparent;
    cursor: pointer;
}