*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
background:#081423;
height:100vh;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden;
font-family:Arial;
}

.gallery-container{
width:95%;
max-width:1400px;
position:relative;
}

.gallery-track{
display:flex;
gap:20px;
overflow-x:auto;
scroll-behavior:smooth;
padding:20px;
scroll-snap-type:x mandatory;
}

.gallery-track::-webkit-scrollbar{
display:none;
}

.photo{
flex:0 0 320px;
scroll-snap-align:center;
cursor:pointer;
transition:.3s;
}

.photo:hover{
transform:scale(1.05);
}

.photo img{
width:100%;
height:450px;
object-fit:cover;
border-radius:20px;
}

.nav{
position:absolute;
top:50%;
transform:translateY(-50%);
width:60px;
height:60px;
border:none;
border-radius:50%;
cursor:pointer;
font-size:28px;
z-index:100;
}

.prev{
left:0;
}

.next{
right:0;
}

#lightbox{
position:fixed;
inset:0;
background:rgba(0,0,0,.95);

display:flex;
justify-content:center;
align-items:center;

opacity:0;
visibility:hidden;
transition:.3s;
}

#lightbox.active{
opacity:1;
visibility:visible;
}

#lightbox img{
max-width:95%;
max-height:95%;
border-radius:15px;

transform:scale(.3);
transition:.3s;
}

#lightbox.active img{
transform:scale(1);
}