/* ==========================================================================
   ABIDE CITY – grid
   12 columns, one gutter, one outer margin. Everything sits on it.
   .cA-B means "from column A to column B, inclusive" – so .c1-5 spans five.
   ========================================================================== */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  padding: 0 var(--edge);   /* --edge carries the centring – see tokens.css */
}

.c1-1 { grid-column: 1 / 2; }
.c1-2 { grid-column: 1 / 3; }
.c1-3 { grid-column: 1 / 4; }
.c1-4 { grid-column: 1 / 5; }
.c1-5 { grid-column: 1 / 6; }
.c1-6 { grid-column: 1 / 7; }
.c1-7 { grid-column: 1 / 8; }
.c1-8 { grid-column: 1 / 9; }
.c1-9 { grid-column: 1 / 10; }
.c1-10 { grid-column: 1 / 11; }
.c1-11 { grid-column: 1 / 12; }
.c1-12 { grid-column: 1 / 13; }
.c2-2 { grid-column: 2 / 3; }
.c2-3 { grid-column: 2 / 4; }
.c2-4 { grid-column: 2 / 5; }
.c2-5 { grid-column: 2 / 6; }
.c2-6 { grid-column: 2 / 7; }
.c2-7 { grid-column: 2 / 8; }
.c2-8 { grid-column: 2 / 9; }
.c2-9 { grid-column: 2 / 10; }
.c2-10 { grid-column: 2 / 11; }
.c2-11 { grid-column: 2 / 12; }
.c2-12 { grid-column: 2 / 13; }
.c3-3 { grid-column: 3 / 4; }
.c3-4 { grid-column: 3 / 5; }
.c3-5 { grid-column: 3 / 6; }
.c3-6 { grid-column: 3 / 7; }
.c3-7 { grid-column: 3 / 8; }
.c3-8 { grid-column: 3 / 9; }
.c3-9 { grid-column: 3 / 10; }
.c3-10 { grid-column: 3 / 11; }
.c3-11 { grid-column: 3 / 12; }
.c3-12 { grid-column: 3 / 13; }
.c4-4 { grid-column: 4 / 5; }
.c4-5 { grid-column: 4 / 6; }
.c4-6 { grid-column: 4 / 7; }
.c4-7 { grid-column: 4 / 8; }
.c4-8 { grid-column: 4 / 9; }
.c4-9 { grid-column: 4 / 10; }
.c4-10 { grid-column: 4 / 11; }
.c4-11 { grid-column: 4 / 12; }
.c4-12 { grid-column: 4 / 13; }
.c5-5 { grid-column: 5 / 6; }
.c5-6 { grid-column: 5 / 7; }
.c5-7 { grid-column: 5 / 8; }
.c5-8 { grid-column: 5 / 9; }
.c5-9 { grid-column: 5 / 10; }
.c5-10 { grid-column: 5 / 11; }
.c5-11 { grid-column: 5 / 12; }
.c5-12 { grid-column: 5 / 13; }
.c6-6 { grid-column: 6 / 7; }
.c6-7 { grid-column: 6 / 8; }
.c6-8 { grid-column: 6 / 9; }
.c6-9 { grid-column: 6 / 10; }
.c6-10 { grid-column: 6 / 11; }
.c6-11 { grid-column: 6 / 12; }
.c6-12 { grid-column: 6 / 13; }
.c7-7 { grid-column: 7 / 8; }
.c7-8 { grid-column: 7 / 9; }
.c7-9 { grid-column: 7 / 10; }
.c7-10 { grid-column: 7 / 11; }
.c7-11 { grid-column: 7 / 12; }
.c7-12 { grid-column: 7 / 13; }
.c8-8 { grid-column: 8 / 9; }
.c8-9 { grid-column: 8 / 10; }
.c8-10 { grid-column: 8 / 11; }
.c8-11 { grid-column: 8 / 12; }
.c8-12 { grid-column: 8 / 13; }
.c9-9 { grid-column: 9 / 10; }
.c9-10 { grid-column: 9 / 11; }
.c9-11 { grid-column: 9 / 12; }
.c9-12 { grid-column: 9 / 13; }
.c10-10 { grid-column: 10 / 11; }
.c10-11 { grid-column: 10 / 12; }
.c10-12 { grid-column: 10 / 13; }
.c11-11 { grid-column: 11 / 12; }
.c11-12 { grid-column: 11 / 13; }
.c12-12 { grid-column: 12 / 13; }

/* dev aid – add ?grid to the URL to see the columns */
body.show-grid .grid { position: relative; }
body.show-grid .grid > * { outline: 1px solid rgba(255,0,0,.25); }

@media (max-width: 1024px) {
.c1-1, .c1-2, .c1-3, .c1-4, .c1-5, .c1-6, .c1-7, .c1-8, .c1-9, .c1-10, .c1-11, .c1-12, .c2-2, .c2-3, .c2-4, .c2-5, .c2-6, .c2-7, .c2-8, .c2-9, .c2-10, .c2-11, .c2-12, .c3-3, .c3-4, .c3-5, .c3-6, .c3-7, .c3-8, .c3-9, .c3-10, .c3-11, .c3-12, .c4-4, .c4-5, .c4-6, .c4-7, .c4-8, .c4-9, .c4-10, .c4-11, .c4-12, .c5-5, .c5-6, .c5-7, .c5-8, .c5-9, .c5-10, .c5-11, .c5-12, .c6-6, .c6-7, .c6-8, .c6-9, .c6-10, .c6-11, .c6-12, .c7-7, .c7-8, .c7-9, .c7-10, .c7-11, .c7-12, .c8-8, .c8-9, .c8-10, .c8-11, .c8-12, .c9-9, .c9-10, .c9-11, .c9-12, .c10-10, .c10-11, .c10-12, .c11-11, .c11-12, .c12-12 { grid-column: 1 / 13; }
}