/* Triptych: 3 columns desktop, 1 small column on phones */
.gallery-3-wide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  /* no max-width: fills the page/container */
}

.gallery-3-wide a { display: block; }
.gallery-3-wide img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Phone: stack vertically; keep thumbnails small and centered */
@media (max-width: 720px) {
  .gallery-3-wide {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .gallery-3-wide a {
    width: 240px;     /* small thumbnails on mobile */
    max-width: 90vw;  /* prevent overflow on very narrow devices */
  }
}

/* Optional: make the gallery truly full-bleed across the viewport,
   even if your content column is constrained by the theme.
   Add class "full-bleed" to the wrapper div to enable. */
.gallery-3-wide.full-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}