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

body{

font-family:'Poppins',sans-serif;

background:#fafafa;

color:#111;

}

.gallery-page{

padding:80px 20px;

}

.gallery-container{

max-width:1200px;

margin:auto;

}

.gallery-header{

text-align:center;

margin-bottom:45px;

}

.gallery-header h1{

font-size:42px;

font-weight:800;

margin-bottom:10px;

}

.gallery-header p{

color:#666;

line-height:28px;

margin-bottom:25px;

}

.back-btn{

display:inline-block;

padding:12px 24px;

background:#111;

color:#fff;

text-decoration:none;

border-radius:50px;

font-weight:600;

transition:.3s;

}

.back-btn:hover{

opacity:.9;

}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,260px));
    justify-content:center;
    gap:10px;
}

.gallery-item{

aspect-ratio:1/1;

overflow:hidden;

cursor:pointer;

border-radius:16px;

background:#eee;

}

.gallery-item img{

width:100%;

height:100%;

object-fit:cover;

display:block;

transition:.35s;

}

.gallery-item:hover img{

transform:scale(1.05);

}

/* ========= LIGHTBOX ========= */

.lightbox{

position:fixed;

inset:0;

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

display:flex;

justify-content:center;

align-items:center;

opacity:0;

visibility:hidden;

transition:.3s;

z-index:9999;

}

.lightbox.show{

opacity:1;

visibility:visible;

}

.lightbox img{

max-width:90%;

max-height:85vh;

border-radius:18px;

}

.close{

position:absolute;

top:25px;

right:35px;

font-size:45px;

color:#fff;

cursor:pointer;

}

.prev,
.next{

position:absolute;

top:50%;

transform:translateY(-50%);

width:55px;

height:55px;

border:none;

border-radius:50%;

background:rgba(255,255,255,.15);

color:#fff;

font-size:22px;

cursor:pointer;

}

.prev{

left:25px;

}

.next{

right:25px;

}

/* ==================== RESPONSIVE ==================== */

@media(max-width:1024px){

.gallery-container{

max-width:900px;

}

}

@media(max-width:768px){

.gallery-page{

padding:70px 16px;

}

.gallery-header h1{

font-size:34px;

}

.gallery-grid{

grid-template-columns:repeat(2,1fr);

gap:8px;

}

.gallery-item{

border-radius:12px;

}

.prev,
.next{

display:none;

}

}

@media(max-width:480px){

.gallery-page{

padding:60px 10px;

}

.gallery-header h1{

font-size:28px;

}

.gallery-header p{

font-size:14px;

line-height:24px;

}

.gallery-grid{

gap:6px;

}

.gallery-item{

border-radius:8px;

}

.back-btn{

width:100%;

text-align:center;

}

}