/* ---------- 12-column page grid ----------
   Margin and gutter come from the responsive tokens in variables.css:
   xl-l (>=1200px):    margin 80px, gutter 20px
   m    (980-1199px):  margin 40px, gutter 20px
   s    (640-979px):   margin 40px, gutter 20px
   xs   (360-639px):   margin 24px, gutter 16px
   S and M are kept as separate tiers even though their token values
   currently match — don't merge them into one "m-s" breakpoint.
   Columns stretch to fill (1fr) at every breakpoint. */

.container{
  width: 100%;
  padding-left: var(--grid-margin);
  padding-right: var(--grid-margin);
  box-sizing: border-box;
}

.grid{
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  column-gap: var(--grid-gutter);
}

.col-1{grid-column: span 1;}
.col-2{grid-column: span 2;}
.col-3{grid-column: span 3;}
.col-4{grid-column: span 4;}
.col-5{grid-column: span 5;}
.col-6{grid-column: span 6;}
.col-7{grid-column: span 7;}
.col-8{grid-column: span 8;}
.col-9{grid-column: span 9;}
.col-10{grid-column: span 10;}
.col-11{grid-column: span 11;}
.col-12{grid-column: span 12;}