.film-section{

    height:50vh;

    padding-top:80px; /* change to your navbar height */

    display:flex;

    justify-content:center;

    align-items:center;

}



.gallery{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

}



/* FILM WINDOW */

.film-window{

    width:100vw;

    overflow:hidden;

    position:relative;

}



/* DARK CINEMA FADE */

.film-window::before,
.film-window::after{

    content:"";

    position:absolute;

    top:0;

    width:35%;

    height:100%;

    z-index:5;

    pointer-events:none;

}



.film-window::before{

    left:0;

    background:linear-gradient(
        to right,
        rgba(0,0,0,.95),
        transparent
    );

}



.film-window::after{

    right:0;

    background:linear-gradient(
        to left,
        rgba(0,0,0,.95),
        transparent
    );

}




/* FILM MOVEMENT */

.film-track{

    display:flex;

    align-items:center;

    transition:transform .8s cubic-bezier(.22,.61,.36,1);

}





/* PROJECTOR VIBRATION */

.film{

    flex:0 0 850px;

    display:flex;

    justify-content:center;

    animation:projectorShake .12s infinite;

}



@keyframes projectorShake{

    0%{
        transform:translateY(0);
    }

    25%{
        transform:translateY(1px);
    }

    50%{
        transform:translateY(-1px);
    }

    75%{
        transform:translateY(1px);
    }

    100%{
        transform:translateY(0);
    }

}





/* FRAME */

.frame{

    width:750px;

    height:450px;

    background:#202020;

    border-radius:15px;

    padding:25px;

    position:relative;

}





/* FILM HOLES */

.frame::before,
.frame::after{

    content:"";

    position:absolute;

    left:0;

    width:100%;

    height:18px;


    background:
    repeating-linear-gradient(
        to right,
        transparent 0 20px,
        white 20px 40px
    );

}



.frame::before{

    top:0;

}



.frame::after{

    bottom:0;

}





.frame img{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:8px;

    cursor:pointer;

    transition:.4s;

}



.film:hover img{

    transform:scale(1.02);

}





/* ARROWS */

.arrow{

    position:absolute;

    z-index:50;

    width:60px;

    height:60px;

    border-radius:50%;

    border:1px solid rgba(198,162,76,0.4);

    background:rgba(59,82,102,0.55);

    backdrop-filter:blur(4px);

    color:#F6EEDF;

    font-size:26px;

    line-height:1;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.25s;

}

.arrow:hover{

    background:rgba(198,162,76,0.85);

    border-color:rgba(198,162,76,0.85);

    color:#243040;

}



#prev{

    left:30px;

}



#next{

    right:30px;

}





/* FILM GRAIN */

.gallery::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:.08;

    z-index:15;

    background-image:url(
    "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"
    );

}





/* ZOOM IMAGE */

.lightbox{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.9);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    pointer-events:none;

    transition:.4s;

    z-index:100;

}



.lightbox.show{

    opacity:1;

    pointer-events:auto;

}



.lightbox img{

    max-width:90%;

    max-height:90%;

    border-radius:15px;

    transform:scale(.5);

    transition:.4s;

}



.lightbox.show img{

    transform:scale(1);

}

.memories-title{
    text-align:center;
    padding-top:100px;
    padding-bottom:24px;
    margin:0;
    color:var(--rose);
    font-size:30px;
}

/* ===== MOBILE / TABLET =====
   Shrinks the film-strip frames and nav arrows so the carousel fits on
   narrow screens. index.js/memories.js reads the frame's real width at
   runtime, so it stays centered at every size below.
*/
@media(max-width:900px){
    .film{
        flex:0 0 520px;
    }
    .frame{
        width:440px;
        height:270px;
        padding:18px;
    }
    .arrow{
        width:50px;
        height:50px;
        font-size:28px;
    }
}

@media(max-width:768px){
    .memories-title{
        padding-top:30px;
        font-size:20px;
    }
    .film-section{
        padding-top:20px;
    }
}

@media(max-width:600px){
    .film-section{
        padding-top:10px;
    }
    .memories-title{
        font-size:17px;
        padding-top:20px;
    }
    .film{
        flex:0 0 320px;
    }
    .frame{
        width:280px;
        height:180px;
        padding:10px;
        border-radius:10px;
    }
    .frame::before,
    .frame::after{
        height:12px;
    }
    .arrow{
        width:38px;
        height:38px;
        font-size:20px;
    }
    #prev{
        left:8px;
    }
    #next{
        right:8px;
    }
    .film-window::before,
    .film-window::after{
        width:12%;
    }
}