/* ============ Round 8: "Gazons, voor en na" (the results page), larger and taller photos on every screen (29 Oct 2026) ============
   The owner asked for bigger photos on all screen sizes. Before: the pairs sat in a 1040 px column (333 x 444 px photos on a laptop, 156 x 208 px on a phone,
   two to a card), the gallery had 5 columns of 264 x 352 px. Now: the pairs use the width of the page like the gallery below, the photos are taller, and on a
   phone each pair is a swipe row with one large photo at a time (Voor, Tussendoor, Na). The small home-page variant (.ba-feature) is not touched.
   Markup: Front/Blocks/BeforeAfter.php (data-snap on each .ba-grid instead of on .ba-pairs, and the srcset `sizes` of the new widths), LawnGallery.php. */

/* The pairs: the whole width of the page, not a 1040 px column. */
.ba-sec:not(.ba-feature) .container > * { max-width: none; }
.ba-sec:not(.ba-feature) .ba-pairs { gap: clamp(44px, 6vw, 80px); }
.ba-sec:not(.ba-feature) .ba-title { margin-bottom: 20px; font-size: clamp(22px, 2.3vw, 30px); }
.ba-sec:not(.ba-feature) .ba-grid { gap: clamp(12px, 1.6vw, 24px); }
.ba-sec:not(.ba-feature) .ba-grid.ba-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ba-sec:not(.ba-feature) .ba-grid.ba-n3 .ba-between { display: block; }   /* the older rule hid the middle photo under 760 px */
/* Taller: three to a row are 3 : 4.3, two to a row 4 : 5.2 (the originals are tall phone photos, so more of the garden shows). The cap keeps one photo within a screen. */
.ba-sec:not(.ba-feature) .ba-img { aspect-ratio: 3 / 4.3; max-height: min(92svh, 940px); }
.ba-sec:not(.ba-feature) .ba-n2 .ba-img { aspect-ratio: 4 / 5.2; }
.ba-sec:not(.ba-feature) .ba-label { margin-top: 12px; font-size: 15px; }
.ba-sec:not(.ba-feature) .ba-caption { margin-top: 18px; font-size: 16.5px; }

/* Tablets: three photos to a row are narrow here, so they are taller still. */
@media (min-width: 721px) and (max-width: 1023px) {
  .ba-sec:not(.ba-feature) .ba-grid.ba-n3 .ba-img { aspect-ratio: 3 / 4.8; }
}

/* The gallery: wider columns (4 on a laptop, 2 on a tablet) and taller photos. */
.lg-sec .lg-grid { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: clamp(12px, 1.6vw, 22px); }
.lg-sec .lg-thumb { aspect-ratio: 3 / 4.3; }
.lg-sec .lg-caption { margin-top: 10px; font-size: 14.5px; }

/* Phones: a swipe row per pair (carousel.js adds the dots), one big photo at a time with the next one peeking in; the gallery is a row of big photos too. */
@media (max-width: 720px) {
  .ba-sec:not(.ba-feature) .ba-grid[data-snap] { --snap-w: 84%; --snap-max: 380px; --snap-gap: 10px; }
  .ba-sec:not(.ba-feature) .ba-grid .ba-img, .ba-sec:not(.ba-feature) .ba-n2 .ba-img { aspect-ratio: 3 / 4.2; max-height: none; }
  .ba-sec:not(.ba-feature) .ba-title { font-size: 21px; margin-bottom: 14px; }
  .lg-sec .lg-grid[data-snap] { --snap-w: 84%; --snap-max: 380px; --snap-gap: 10px; }
}