/* Gallery-specific layout. Kept separate so photo ratios remain reliable even
   when a browser has an older copy of the shared site stylesheet cached. */
.gallery {
  column-count: 3;
  column-gap: clamp(14px, 1.5vw, 22px);
}

.gallery figure {
  display: inline-block;
  width: 100%;
  margin: 0 0 clamp(14px, 1.5vw, 22px);
  overflow: hidden;
  vertical-align: top;
  break-inside: avoid;
  border-radius: 2px 26px 2px 26px;
  background: #dce9ef;
  box-shadow: 0 10px 28px rgba(8, 47, 80, .1);
}

.gallery figure:nth-child(4n + 2),
.gallery figure:nth-child(4n + 3) {
  border-radius: 26px 2px 26px 2px;
}

.gallery img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
}

.lightbox {
  width: auto;
  max-width: 94vw;
  height: auto;
  max-height: 92vh;
  overflow: visible;
}

.lightbox img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: min(94vw, 1100px) !important;
  max-height: 86vh !important;
  object-fit: contain !important;
}

@media (max-width: 820px) {
  .gallery { column-count: 2; }
}

@media (max-width: 520px) {
  .gallery { column-count: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery img { transition: none !important; }
}