.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); }
.span-1 { grid-column: span 1; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-9 { grid-column: span 9; }
.span-10 { grid-column: span 10; }
.span-12 { grid-column: 1 / -1; }
.col-1-4 { grid-column: 1 / 5; }
.col-1-7 { grid-column: 1 / 8; }
.col-1-8 { grid-column: 1 / 9; }
.col-3-7 { grid-column: 3 / 8; }
.col-4-8 { grid-column: 4 / 9; }
.col-5-10 { grid-column: 5 / 11; }
.col-5-11 { grid-column: 5 / 12; }
.col-6-10 { grid-column: 6 / 11; }
.col-7-12 { grid-column: 7 / 13; }
.col-8-12 { grid-column: 8 / 13; }
.col-9-12 { grid-column: 9 / 13; }
.col-10-12 { grid-column: 10 / 13; }
.col-11-12 { grid-column: 11 / 13; }