.grid {
    --grid-col-span: 1;
    --grid-row-span: 1;
    --grid-gap: var(--spacing-4);

    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
}

/*
 *  Grid modifiers
 */
$gaps: 1,2,3,4,5,6,7,8,9,10;
@each $gap in $gaps {
    .grid-gap-#{$gap} {
        --grid-gap: var(--spacing-#{$gap});
    }
}

.col {
    grid-column-start: var(--grid-col-start);
    grid-column-end: span var(--grid-col-span);
    grid-row-end: span var(--grid-row-span);
}

/*
 *  Grid column modifiers
 */
$spans: 1,2,3,4,5,6,7,8,9,10,11,12;

// Column widths
@each $span in $spans {
    .col-span-#{$span} {
        --grid-col-span: #{$span};
    }
}

// Column starting postions
@each $span in $spans {
    .col-start-#{$span} {
        --grid-col-start: #{$span};
    }
}

// Column ending postions
@each $span in $spans {
    .col-end-#{$span} {
        --grid-col-start: -#{$span};
    }
}