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

body{
background:#1f2121;
display:flex;
justify-content:center;
padding:30px;
font-family:Arial;
}

.gallery{
width:100%;
max-width:1100px;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:12px;
}

.gallery img{
width:100%;
height:350px;
object-fit:cover;
border-radius:14px;
border:3px solid #fff;
cursor:pointer;
transition:0.3s;
}

.gallery img:hover{
transform:scale(1.05);
}

/* Card */
.card{
grid-column:span 4;
height:300px;
background:url("https://images.unsplash.com/photo-1520975922203-b5f51cbb3c3f");
background-size:cover;
background-position:center;
border-radius:14px;
}

/* Popup */
.popup{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.95);
display:none;
justify-content:center;
align-items:center;
z-index:1000;
}

.popup img{
max-width:90%;
max-height:80%;
border-radius:10px;
border:4px solid white;
}

/* Buttons */
.popup .close{
position:absolute;
top:20px;
right:30px;
font-size:30px;
color:white;
cursor:pointer;
}

.popup .prev,
.popup .next{
position:absolute;
top:50%;
transform:translateY(-50%);
font-size:40px;
color:white;
cursor:pointer;
padding:10px;
}

.popup .prev{ left:20px; }
.popup .next{ right:20px; }

/* Responsive */
@media(max-width:900px){
.gallery{
grid-template-columns:repeat(2,1fr);
}
.card{
grid-column:span 2;
}
}

@media(max-width:500px){
.gallery{
grid-template-columns:1fr;
}
.card{
grid-column:span 1;
}
}