.mwg_effect007 .scroll {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.mwg_effect007 .header {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 25px;
    left: 0;
    font: 500 normal 13px/0.9 'IBM Plex Mono';
    text-transform: uppercase;
}
.mwg_effect007 .pin-height {
    height: 400vh;
}
.mwg_effect007 .container-round {
    position: relative;
    height: 100vh;
    overflow: hidden; /* Hides anything exceeding the container */
}
.mwg_effect007 .circle {
    width: 300%;
    aspect-ratio: 1;
    position: absolute;
    top: 50%;
    left: -100%;
}
.mwg_effect007 .media {
    width: 34vw;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 1em;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%,-50%);
}


/* ============================================
   Responsive — Tablet + Mobile (≤ 991px)
   L'animation ScrollTrigger pin + rotation des cercles tourne aussi
   sur mobile maintenant. On garde toute la mécanique du desktop
   (pin-height 400vh, container-round 100vh, circles positionnés
   absolu, rotation GSAP). On adapte UNIQUEMENT la taille des médias
   pour qu'ils restent visibles sur un viewport portrait étroit :
   desktop = 34vw (~490px à 1440), mobile = 55vw (~215px à 390) —
   sinon les images sont trop petites pour être identifiables sur
   smartphone.
   ============================================ */
@media screen and (max-width: 991px) {
    .mwg_effect007 .media {
        width: 55vw;
    }
}