/* Custom Grid (components/custom-grid.twig) lays its columns out on the
   page's own 12-column subgrid via Tailwind's col-span-6/4/3 (2/3/4 items).
   12 isn't divisible by 5, so a 5-column row can't be expressed as an
   integer col-span the same way — added 2026-10-12 per explicit request
   (duravant.com's own "Our Values" section uses 5). For that case only,
   break out of the inherited subgrid and lay the columns out as their own
   5-track grid instead, reusing the SAME --col-gap custom property the
   rest of the fluid-grid system already uses (see dist/assets/style-*.css,
   .fluid-grid's own column-gap) so horizontal spacing still matches every
   other section on the page. Scoped to [data-columns="5"] only — 2/3/4
   keep using the native Tailwind col-span classes, untouched.

   1024px matches this theme's own lg breakpoint (confirmed against the
   sizes attribute custom-grid.twig's own ResponsiveImage() call already
   uses: "(min-width: 1024px) 25vw, 100vw"). Below it, columns already
   stack full-width (col-span-full) regardless of count — no override
   needed. */
@media (min-width: 1024px) {
  .oc-custom-grid[data-columns="5"] {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }
  .oc-custom-grid[data-columns="5"] > .oc-custom-grid-column {
    grid-column: span 1 / span 1;
  }
}