:root{
--grid-margin:2rem;
--grid-gutter:2rem;
--grid-max-width:99rem;
}
.cds-grid{max-width:var(--grid-max-width);margin:0 auto;padding:0 var(--grid-margin);display:grid;grid-template-columns:repeat(16,1fr);column-gap:var(--grid-gutter)}
.cds-col-span-1{grid-column:span 1}.cds-col-span-2{grid-column:span 2}.cds-col-span-3{grid-column:span 3}.cds-col-span-4{grid-column:span 4}
.cds-col-span-5{grid-column:span 5}.cds-col-span-6{grid-column:span 6}.cds-col-span-7{grid-column:span 7}.cds-col-span-8{grid-column:span 8}
.cds-col-span-9{grid-column:span 9}.cds-col-span-10{grid-column:span 10}.cds-col-span-12{grid-column:span 12}.cds-col-span-16{grid-column:span 16}
/* !important on both breakpoints below: several pages set an explicit
   grid-column start position via inline style (e.g. "6 / span 5") to lay
   out cards side-by-side on desktop's 16-column grid. An inline style has
   higher specificity than any class selector, so without !important these
   narrower-grid overrides lose to the inline desktop position — cards end
   up squeezed into a handful of pixels instead of stacking full-width. */
@media (max-width:1055px){.cds-grid{grid-template-columns:repeat(8,1fr)}[class*="cds-col-span-"]{grid-column:span 8 !important}}
@media (max-width:671px){.cds-grid{grid-template-columns:repeat(4,1fr);padding:0 1rem;column-gap:1rem}[class*="cds-col-span-"]{grid-column:span 4 !important}}