* {
box-sizing:border-box;
}


body {

margin:0;

background:#0b0b0b;

color:white;

font-family:
Arial,
Helvetica,
sans-serif;

}



header {

text-align:center;

padding:70px 20px;

background:
linear-gradient(
135deg,
#111,
#252525
);

}



header h1 {

font-size:60px;

letter-spacing:6px;

margin:0;

}



header p {

font-size:20px;

color:#aaa;

}



.gallery {

padding:40px;

columns:4 280px;

column-gap:25px;

}



.card {

background:#171717;

border-radius:18px;

overflow:hidden;

margin-bottom:25px;

break-inside:avoid;

box-shadow:
0 10px 30px rgba(0,0,0,.5);

transition:.3s;

}



.card:hover {

transform:translateY(-8px);

}



.card img {

width:100%;

display:block;

cursor:pointer;

}



.info {

padding:20px;

}



.info h2 {

margin:0 0 10px;

font-size:22px;

}



.info p {

color:#aaa;

line-height:1.5;

}




#lightbox {

display:none;

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

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

justify-content:center;

align-items:center;

z-index:999;

}



#lightbox img {

max-width:90%;

max-height:90%;

border-radius:15px;

}



@media(max-width:700px){

header h1 {

font-size:38px;

}


.gallery {

padding:20px;

}

}