:root{
  --bg:#f4f7fa;
  --card:#ffffff;
  --border:#dbe4ec;
  --primary:#1f3b57;
}

*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:Arial,sans-serif;
  background:var(--bg);
  color:#263238;
}

.container{
  width:min(1150px,92%);
  margin:0 auto;
}

.hero{
  background:linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7)), url('camera-example.svg') center/cover no-repeat;
  color:white;
  padding:5rem 0;
}

.card{
  background:var(--card);
  margin:2rem 0;
  padding:2rem;
  border-radius:18px;
  border:1px solid var(--border);
  box-shadow:0 10px 24px rgba(0,0,0,.05);
}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.5rem;
}

.gallery-card{
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  background:white;
  transition:transform .25s ease;
}

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

.gallery-card img{
  width:100%;
  display:block;
  aspect-ratio:16/10;
  object-fit:cover;
  cursor:pointer;
  transition:transform .3s ease;
}

.gallery-card img:hover{
  transform:scale(1.03);
}

.gallery-content{
  padding:1rem;
}

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

.lightbox-content{
  max-width:90%;
  max-height:90%;
  border-radius:12px;
}

.close{
  position:absolute;
  top:20px;
  right:35px;
  color:white;
  font-size:42px;
  cursor:pointer;
}