/* container must not be CSS Grid or multi-columns */
.gallery-grid {
  position: relative;
  display: block;
  margin: 0 auto;
}

/* 3 columns by default; padding = half gutter on each side */
.grid-sizer,
.gallery-item { width: 33.333%; }

.gallery-item { 
  aspect-ratio: 4 / 3;        /* 4:3 thumbs */
  box-sizing: border-box;
  padding: 8px;               /* gutter via padding */
}

.gallery-thumbnail {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  transition: transform .2s ease;
}
.gallery-thumbnail:hover { transform: scale(1.05); }


.gallery-item a,
.gallery-thumbnail {
  display: block;
  width: 100%;
  height: 100%;               /* IMPORTANT: was height:auto */
  object-fit: cover;          /* safe since thumbs are already 4:3 */
  border-radius: 8px;
  transition: transform .2s ease;
}

.glb-scroll-lock {
  position: fixed;
  overflow: hidden;
  width: 100%;
  left: 0;
  right: 0;
}

.grid-sizer, .gallery-item { width: 33.333%; }  /* 3 columns */
@media (max-width: 1024px){ .grid-sizer, .gallery-item { width: 50%; } }
@media (max-width: 640px){  .grid-sizer, .gallery-item { width: 100%; } }