.gallery-grid img {
  cursor: zoom-in;
  transition: filter .2s;
}
.gallery-grid img:hover { filter: brightness(.84); }
.lightbox {
  width: 100vw; height: 100vh; max-width: none; max-height: none;
  margin: 0; border: 0; padding: 0; overflow: hidden;
  background: rgba(3,15,14,.97); color: #fff;
}
.lightbox::backdrop { background: #03100f; }
.lightbox figure {
  margin: 0; width: 100%; height: 100%; padding: 42px 84px 58px;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
}
.lightbox figure img {
  max-width: 100%; max-height: calc(100vh - 110px);
  width: auto; height: auto; object-fit: contain; user-select: none;
}
.lightbox figcaption { position: absolute; bottom: 20px; font-size: 14px; color: #c9d5d2; }
.lightbox-close,.lightbox-prev,.lightbox-next {
  position: absolute; z-index: 3; border: 0; color: white;
  background: rgba(255,255,255,.12); cursor: pointer; display: grid; place-items: center;
}
.lightbox-close { right: 20px; top: 18px; width: 48px; height: 48px; border-radius: 50%; font-size: 31px; }
.lightbox-prev,.lightbox-next { top: 50%; width: 54px; height: 76px; margin-top: -38px; font-size: 48px; }
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }
.lightbox button:hover { background: rgba(255,255,255,.24); }
@media(max-width:560px) {
  .lightbox figure { padding: 58px 12px 70px; }
  .lightbox-prev,.lightbox-next { top: auto; bottom: 14px; height: 48px; width: 48px; margin: 0; border-radius: 50%; font-size: 36px; }
  .lightbox-prev { left: 16px; }
  .lightbox-next { right: 16px; }
  .lightbox figcaption { bottom: 28px; }
}