// Layouts
@mixin flexBox ($align, $justify, $direction) {
    display: flex;
    align-items: ($align);
    justify-content: ($justify);
    flex-direction: ($direction);
}

@mixin gridColumnsGap ($template, $gap) {
    display: grid;
    grid-template-columns: ($template);
    gap: ($gap);
}

@mixin gridColNoGap ($template) {
    display: grid;
    grid-template-columns: ($template);
}

@mixin gridRowsGap ($template, $gap) {
    display: grid;
    grid-template-rows: ($template);
    gap: ($gap);
}

@mixin gridRowsNoGap ($template) {
    display: grid;
    grid-template-rows: ($template);
}