@import (reference) 'utilities/media.less';
@import (reference) 'utilities/functions.less';

/* CRITICAL BEGIN */

.generate-grid(@column, @key: g) when (@column > 0) {
    .generate-grid((@column - 1), @key);

    .@{key}-@{column} {
        grid-template-columns: percentage((@column / @wrapper)) auto;

    }
}

.grid {
    display: grid;

}

.grid.spacedout {
    grid-gap: @space;
}

.generate-grid(@wrapper - 1);



.media(md, {
    .generate-grid(@wrapper - 1, gmd);

});

.media(lg, {
    .generate-grid(@wrapper - 1, glg);
});

/* CRITICAL END */