Same image set rendered twice: mobile swiper (d-lg-none) and desktop A/B/C grid (d-none d-lg-block).
Desktop rows repeat in groups of 7 images: within each group, position 1-2 -> row A
(flex+narrow), 3-5 -> row B, 6-7 -> row C (narrow+flex). Add more than 7 images and the
A/B/C pattern repeats (a,b,c,a,b,c,...); a trailing partial group only renders the rows
it has images for (row B/C are skipped when the group doesn't reach that far).
Group starts are found via a plain 1..galleryCount range (f:range's default step of 1)
filtered to every 7th position, rather than f:range(..., step: 7): PHP's range() throws
a ValueError whenever step isn't smaller than the start/end span, which happens for any
gallery with 2-7 images — exactly the sizes that matter most.
{data -> f:render.text(field: 'subheader')}
{data -> f:render.text(field: 'header')}
aria-hidden: the mobile slider above already exposes the same
images to assistive tech with proper semantics (role=region +
label) — this grid is a pure visual/desktop-only re-layout of
the same set, so without this, screen reader users would get
every image announced twice regardless of viewport.