.gallery { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; }
.gallery a { display: block; max-width: 100%; cursor: zoom-in; }
.gallery img { display: block; width: auto; height: 100px; max-width: 100%; object-fit: contain; }

.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  border: 0;
  padding: 24px;
  margin: 0;
  color: #fff;
  background: transparent;
  overflow: auto;
  overscroll-behavior: contain;
  cursor: zoom-out;
}
.lightbox[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.lightbox::backdrop { background: rgb(0 0 0 / 42%); }
.lightbox img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 130px); object-fit: contain; cursor: default; }
.lightbox-footer { display: flex; align-items: center; justify-content: center; gap: 20px; max-width: 100%; cursor: default; }
.lightbox-caption { max-width: 70ch; margin: 0; font-size: 14px; line-height: 1.5; text-align: center; text-shadow: 0 1px 3px rgb(0 0 0 / 70%); }
.lightbox button { flex: 0 0 44px; min-height: 44px; padding: 0; border: 0; color: #fff; background: rgb(0 0 0 / 45%); font-size: 20px; cursor: pointer; }
.lightbox button:hover { background: rgb(0 0 0 / 65%); }
html:has(.lightbox[open]) { overflow: hidden; }

@media (max-width: 600px) {
  .gallery { gap: 16px; }
  .gallery img { height: 88px; }
  .lightbox { padding: 16px; }
  .lightbox-footer { gap: 12px; }
}