$grd-columns: 12;
$grd-spans: $grd-columns + 1;
$grd-rows: 5;
$grd-gap: ( null: 30, 2xl: 30, xl: 20, l: 20, m: 15, s: 10 );
$grd-gapIntegers: ( 0, 5, 10, 15, 20, 25, 40, 50 );
$grd-gapAxis: ( x: column, y: row );
$grd-content: ( fs: flex-start, c: center, fe: flex-end, sb: space-between, sa: space-around, s: stretch, u: unset );
$grd-itemsSelf: ( fs: flex-start, c: center, fe: flex-end, u: unset );
$grd-alignment: (
    jc: ( justify-content: $grd-content ),
    ji: ( justify-items: $grd-itemsSelf ),
    js: ( justify-self: $grd-itemsSelf ),
    ac: ( align-content: $grd-content ),
    ai: ( align-items: $grd-itemsSelf ),
    as: ( align-self: $grd-itemsSelf ),
);

// GRID
.grd {
    display: grid;

    @include isMedia($grd-gap) using ($val, $mb) {
        grid-gap: em($val, $mb);
    }
}

.g- {
    // -- TEMPLATE COLUMNS
    &tc\: {
        @include isMedia() using ($mc, $mb) {
            @include isNumber($grd-columns, $mc) using ($col) {
                grid-template-columns: repeat($col, minmax(0, 1fr));
                
                &a {
                    grid-template-columns: repeat($col, minmax(0, auto));
                }
            }
        }
    }
    // -- TEMPLATE ROWS
    &tr\: {
        @include isMedia() using ($mc, $mb) {
            @include isNumber($grd-rows, $mc) using ($row) {
                grid-template-rows: repeat($row, minmax(0, 1fr));
            }
        }
    }
    //-- GAPS
    &g\: {
        @include isMedia() using ($mc, $mb) {
            // ALL
            @include isList($grd-gapIntegers, $mc) using ($gap) {
                grid-gap: em($gap, $mb);
            }
            // X & Y
            @include isMap($grd-gapAxis) using ($key, $axis) {
                @include isList($grd-gapIntegers, $mc) using ($gap) {
                    #{$axis}-gap: em($gap, $mb);
                }
            }
        }
    }
    //-- ALIGNMENT
    @include isMedia() using ($mc, $mb) {
        @include isMap($grd-alignment) using ($key, $array) {
            &\: {
                @include isProp($array) using ($declaration, $values) {
                    @include isMap($values, $mc) using ($class, $val) {
                        #{$declaration}: $val;
                    }
                }
            }
        }
    }
    //-- COLUMN SPANING
    &cs\: {
        @include isMedia() using ($mc, $mb) {
            @include isNumber($grd-columns, $mc, 0) using ($span) {
                @if $span == 0 {
                    display: none;
                } @else {
                    grid-column: span $span;
                }
            }
        }
        @for $s from 1 through $grd-spans {
            @for $e from 1 through $grd-spans {
                @if $s < $grd-spans and $e > $s {
                    &#{$s}-#{$e} {
                        grid-column: #{$s} / #{$e};
                    }
                }
            }
        }
    }
    //-- ROW SPANNING
    &rs\: {
        &1 {
            grid-row: span 1;
        }
    }
}