body {
  margin:0;
  font-family:Arial, sans-serif;
  background:#fff;
  color:#2370AD;
  text-align:center;
}
h1 { padding:20px; }

.gallery {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
  gap:15px;
  padding:20px;
}
.gallery img {
  width:100%;
  cursor:pointer;
  border-radius:10px;
  transition:transform .3s;
}
.gallery img:hover { transform:scale(1.05); }

.lightbox {
  position:fixed;
  inset:0;
  background:rgba(255,255,255,.9);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .4s;
}
.lightbox.show {
  opacity:1;
  pointer-events:auto;
}

.lightbox img {
  max-width:90%;
  max-height:90%;
  animation:zoom .4s ease;
}

@keyframes zoom {
  from { transform:scale(.7); opacity:0; }
  to { transform:scale(1); opacity:1; }
}

.close {
  position:absolute;
  top:20px;
  right:30px;
  font-size:40px;
  cursor:pointer;
}

.nav {
  position:absolute;
  top:50%;
  font-size:60px;
  cursor:pointer;
  user-select:none;
}
.prev { left:20px; }
.next { right:20px; }

@media (max-width:600px) {
  .nav { font-size:40px; }
}