/* Grid reusable classes -------- */

.sd-grid {
    @include sd-grid-columns(); // grid columns and column gutters
    @include sd-grid-padding(); // horizontal and vertical padding
    @include sd-grid-container(); // max-width and center content
}
.sd-grid-columns {
    @include sd-grid-columns();
}
.sd-grid-no-padding {
    @include sd-grid-container();
    @include sd-grid-columns();
}
.sd-subgrid {
    display: grid;
    grid-template-columns: subgrid;
    > * {
        grid-column: 1 / -1;
    }
}
.sd-grid-center-item-size {
    &-2 {
        @include sd-grid-center(2);
    }
    &-4 {
        @include sd-grid-center(4);
    }
    &-6 {
        @include sd-grid-center(6);
    }
    &-8 {
        @include sd-grid-center(8);
    }
    &-10 {
        @include sd-grid-center(10);
    }
}
.sd-grid-center-layout {
    // Default is 8 columns for desktop, 10 columns for tablet
    @include sd-grid-center-layout();
}
.sd-grid-page-layout {
    // 8 columns for desktop, 12 columns for tablet
    @include sd-viewport($sd-desktop) {
        @include sd-grid-center(8);
    }
}