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

body{
font-family:'Montserrat', Arial, sans-serif;
background:#fff;
color:#111;
padding:20px;
}

h1{
margin-bottom:20px;
}

a{
text-decoration:none;
color:inherit;
}

.back-btn{
display:inline-block;
margin-bottom:20px;
font-weight:bold;
}

.grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
gap:15px;
}

.card{
background:#f5f5f5;
border-radius:12px;
overflow:hidden;
transition:.2s;
}

.card:hover{
transform:translateY(-3px);
}

.card img{
width:100%;
aspect-ratio:1/1;
object-fit:cover;
display:block;
}

.card-body{
padding:12px;
text-align:center;
}

.card-title{
font-size:18px;
font-weight:bold;
}

.card-count{
margin-top:6px;
color:#666;
}

.gallery{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
gap:12px;
}

.gallery img{
width:100%;
border-radius:10px;
cursor:pointer;
display:block;
}

.lightbox{
position:fixed;
inset:0;
background:rgba(0,0,0,.95);
display:none;
justify-content:center;
align-items:center;
z-index:9999;
}

.lightbox img{
max-width:95%;
max-height:95%;
}

#closeBtn{
position:absolute;
top:20px;
right:30px;
font-size:40px;
color:#fff;
cursor:pointer;
}

.nav-btn{
position:absolute;
top:50%;
transform:translateY(-50%);
font-size:50px;
background:none;
border:none;
color:white;
cursor:pointer;
padding:20px;
}

#prevBtn{
left:10px;
}

#nextBtn{
right:10px;
}

.site-header{
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
margin-bottom:25px;
}

.site-header h1{
margin:0;
text-align:center;
font-size:42px;
font-weight:700;
}

.instagram-link{
justify-self:end;
display:flex;
align-items:center;
gap:10px;
font-weight:600;
font-size:18px;
}

.instagram-link img{
width:26px;
height:26px;
object-fit:contain;
display:block;
}

@media (max-width: 768px){

body{
padding:10px !important;
}

.grid{
display:grid !important;
grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
gap:8px !important;
}

.card{
border-radius:8px !important;
}

.card-body{
padding:7px !important;
}

.card-title{
font-size:13px !important;
line-height:1.2 !important;
}

.site-header{
display:grid !important;
grid-template-columns:1fr !important;
gap:8px !important;
text-align:center !important;
margin-bottom:16px !important;
}

.site-header h1{
font-size:26px !important;
line-height:1.1 !important;
}

.instagram-link{
justify-self:center !important;
font-size:13px !important;
gap:6px !important;
}

.instagram-link img{
width:24px !important;
height:24px !important;
}

.gallery{
display:grid !important;
grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
gap:8px !important;
}

}

@media (max-width: 380px){

.grid{
grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
gap:7px !important;
}

.card-title{
font-size:12px !important;
}

}