/* Squarespace ImageLoader JS overwrites the inline "position:absolute;width:100%..."
   style we set on <img data-src> elements after page load (it sets el.style.width
   directly from data-image-dimensions, wiping our fix). An !important rule in an
   external stylesheet beats a later non-important inline style, so pin it here. */
img.thumb-image,
img.sqs-image-min-height {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* GalleryMasonry (data-controller="GalleryMasonry") normally gets its layout (item
   positions + wrapper height) computed by Squarespace JS. That JS never runs the
   layout pass here, so wrapper/items collapse to height:0 and the whole gallery is
   invisible. Replace with a plain CSS flex grid — uniform tiles, image cropped via
   object-fit:cover (already forced above). Simpler than reverse-engineering the JS
   masonry math and visually equivalent for a photo gallery. */
.gallery-masonry,
.gallery-masonry-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  height: auto !important;
}
.gallery-masonry-item {
  position: relative !important;
  flex: 0 0 calc(33.333% - 14px) !important;
  width: calc(33.333% - 14px) !important;
  height: auto !important;
}
.gallery-masonry-item-wrapper {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 0 !important;
  padding-bottom: 125% !important;
  overflow: hidden !important;
}