/* Gallery page: every photo shown whole, in columns, at its own shape. */
#root .glp-feed {
  display: block !important;
  /* A fixed count per screen size: "3 300px" fell to a single column between 641 and about 950 px,
     so every photo filled the whole width. */
  columns: 2;
  column-gap: 16px;
}
@media (min-width: 1024px) { #root .glp-feed { columns: 3; column-gap: 18px; } }
@media (min-width: 1500px) { #root .glp-feed { columns: 4; } }
#root .glp-tile {
  display: block !important;
  aspect-ratio: auto !important;
  min-height: 160px;
  margin: 0 0 18px !important;
  break-inside: avoid;
}
#root .glp-tile-img {
  position: static !important;
  display: block;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}
@media (max-width: 640px) {
  #root .glp-feed { columns: 2; column-gap: 10px; }
  #root .glp-tile { margin-bottom: 10px !important; min-height: 110px; }
}
/* The minimum height only holds the place while a photo loads. Once it is in, the tile is exactly the photo, with no empty band under a wide one. */
#root .glp-feed .glp-tile:has(> .glp-tile-img[data-sy="ready"]) { min-height: 0 !important; }

/* On Facebook: one row that moves by itself (gallery.js), edge to edge, with no scrollbar. It can still be swiped. */
#root .glp-reels-grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  gap: 20px !important;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: none !important;
  margin-inline: calc(-1 * clamp(1.5rem, 6vw, 5rem));
  padding-bottom: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#root .glp-reels-grid::-webkit-scrollbar { display: none; }
#root .glp-reel-card {
  flex: none !important;
  width: 267px !important;
  max-width: 78vw !important;
}

/* Gallery hero: one wide photograph, whole, across the full width. No blurred sides and no zoom. */
#root .glp-hero { height: auto !important; aspect-ratio: 2.25; }
#root .glp-hero-bg { inset: 0 !important; width: 100% !important; height: 100% !important; transform: none !important; }
#root .glp-hero-bg > div:first-child { display: none !important; }
#root .glp-hero-bg > div:last-child { background-size: cover !important; transform: none !important; }
#root .glp-hero-h1, #root .glp-hero-sub { text-shadow: 0 2px 14px rgba(0, 0, 0, .75); }
/* Phone: the photo is short, so the words sit under it instead of on it */
@media (max-width: 767px) {
  #root .glp-hero { aspect-ratio: auto; display: flex; flex-direction: column; }
  #root .glp-hero-track { position: relative !important; inset: auto !important; width: 100%; aspect-ratio: 2.25; flex: none; }
  #root .glp-hero-body { position: static !important; padding: 1rem 1.25rem 1.5rem !important; }
}

/* No slide or photo counters */
#root .ts-type-modal-index, #root .glp-lb-counter, #root .lb-counter, #root .pg-lb-ctr { display: none !important; }
body .ts-type-modal-index, body .glp-lb-counter, body .lb-counter, body .pg-lb-ctr { display: none !important; }