/* Grid */

.Grid {
    display: grid;
    grid-gap: var(--spacing-400);
    grid-template-columns: repeat(1, 1fr);
}

/* Sizes */

.Grid.size1 { grid-gap: var(--spacing-200); }
.Grid.size2 { grid-gap: var(--spacing-400); }
.Grid.size3 { grid-gap: var(--spacing-600); }

@media (--breakpoint-1) {
    .Grid.bp1-size1 { grid-gap: var(--spacing-200); }
    .Grid.bp1-size2 { grid-gap: var(--spacing-400); }
    .Grid.bp1-size3 { grid-gap: var(--spacing-600); }
}

@media (--breakpoint-2) {
    .Grid.bp2-size1 { grid-gap: var(--spacing-200); }
    .Grid.bp2-size2 { grid-gap: var(--spacing-400); }
    .Grid.bp2-size3 { grid-gap: var(--spacing-600); }
}

@media (--breakpoint-3) {
    .Grid.bp3-size1 { grid-gap: var(--spacing-200); }
    .Grid.bp3-size2 { grid-gap: var(--spacing-400); }
    .Grid.bp3-size3 { grid-gap: var(--spacing-600); }
}

@media (--breakpoint-4) {
    .Grid.bp4-size1 { grid-gap: var(--spacing-200); }
    .Grid.bp4-size2 { grid-gap: var(--spacing-400); }
    .Grid.bp4-size3 { grid-gap: var(--spacing-600); }
}

/* Columns */

.Grid.columns1 { grid-template-columns: repeat(1, 1fr); }
.Grid.columns2 { grid-template-columns: repeat(2, 1fr); }
.Grid.columns3 { grid-template-columns: repeat(3, 1fr); }
.Grid.columns4 { grid-template-columns: repeat(4, 1fr); }
.Grid.columns5 { grid-template-columns: repeat(5, 1fr); }
.Grid.columns6 { grid-template-columns: repeat(6, 1fr); }
.Grid.columns7 { grid-template-columns: repeat(7, 1fr); }
.Grid.columns8 { grid-template-columns: repeat(8, 1fr); }
.Grid.columns9 { grid-template-columns: repeat(9, 1fr); }
.Grid.columns10 { grid-template-columns: repeat(10, 1fr); }
.Grid.columns11 { grid-template-columns: repeat(11, 1fr); }
.Grid.columns12 { grid-template-columns: repeat(12, 1fr); }

@media (--breakpoint-1) {
    .Grid.bp1-columns1 { grid-template-columns: repeat(1, 1fr); }
    .Grid.bp1-columns2 { grid-template-columns: repeat(2, 1fr); }
    .Grid.bp1-columns3 { grid-template-columns: repeat(3, 1fr); }
    .Grid.bp1-columns4 { grid-template-columns: repeat(4, 1fr); }
    .Grid.bp1-columns5 { grid-template-columns: repeat(5, 1fr); }
    .Grid.bp1-columns6 { grid-template-columns: repeat(6, 1fr); }
    .Grid.bp1-columns7 { grid-template-columns: repeat(7, 1fr); }
    .Grid.bp1-columns8 { grid-template-columns: repeat(8, 1fr); }
    .Grid.bp1-columns9 { grid-template-columns: repeat(9, 1fr); }
    .Grid.bp1-columns10 { grid-template-columns: repeat(10, 1fr); }
    .Grid.bp1-columns11 { grid-template-columns: repeat(11, 1fr); }
    .Grid.bp1-columns12 { grid-template-columns: repeat(12, 1fr); }
}

@media (--breakpoint-2) {
    .Grid.bp2-columns1 { grid-template-columns: repeat(1, 1fr); }
    .Grid.bp2-columns2 { grid-template-columns: repeat(2, 1fr); }
    .Grid.bp2-columns3 { grid-template-columns: repeat(3, 1fr); }
    .Grid.bp2-columns4 { grid-template-columns: repeat(4, 1fr); }
    .Grid.bp2-columns5 { grid-template-columns: repeat(5, 1fr); }
    .Grid.bp2-columns6 { grid-template-columns: repeat(6, 1fr); }
    .Grid.bp2-columns7 { grid-template-columns: repeat(7, 1fr); }
    .Grid.bp2-columns8 { grid-template-columns: repeat(8, 1fr); }
    .Grid.bp2-columns9 { grid-template-columns: repeat(9, 1fr); }
    .Grid.bp2-columns10 { grid-template-columns: repeat(10, 1fr); }
    .Grid.bp2-columns11 { grid-template-columns: repeat(11, 1fr); }
    .Grid.bp2-columns12 { grid-template-columns: repeat(12, 1fr); }
}

@media (--breakpoint-3) {
    .Grid.bp3-columns1 { grid-template-columns: repeat(1, 1fr); }
    .Grid.bp3-columns2 { grid-template-columns: repeat(2, 1fr); }
    .Grid.bp3-columns3 { grid-template-columns: repeat(3, 1fr); }
    .Grid.bp3-columns4 { grid-template-columns: repeat(4, 1fr); }
    .Grid.bp3-columns5 { grid-template-columns: repeat(5, 1fr); }
    .Grid.bp3-columns6 { grid-template-columns: repeat(6, 1fr); }
    .Grid.bp3-columns7 { grid-template-columns: repeat(7, 1fr); }
    .Grid.bp3-columns8 { grid-template-columns: repeat(8, 1fr); }
    .Grid.bp3-columns9 { grid-template-columns: repeat(9, 1fr); }
    .Grid.bp3-columns10 { grid-template-columns: repeat(10, 1fr); }
    .Grid.bp3-columns11 { grid-template-columns: repeat(11, 1fr); }
    .Grid.bp3-columns12 { grid-template-columns: repeat(12, 1fr); }
}

@media (--breakpoint-4) {
    .Grid.bp4-columns1 { grid-template-columns: repeat(1, 1fr); }
    .Grid.bp4-columns2 { grid-template-columns: repeat(2, 1fr); }
    .Grid.bp4-columns3 { grid-template-columns: repeat(3, 1fr); }
    .Grid.bp4-columns4 { grid-template-columns: repeat(4, 1fr); }
    .Grid.bp4-columns5 { grid-template-columns: repeat(5, 1fr); }
    .Grid.bp4-columns6 { grid-template-columns: repeat(6, 1fr); }
    .Grid.bp4-columns7 { grid-template-columns: repeat(7, 1fr); }
    .Grid.bp4-columns8 { grid-template-columns: repeat(8, 1fr); }
    .Grid.bp4-columns9 { grid-template-columns: repeat(9, 1fr); }
    .Grid.bp4-columns10 { grid-template-columns: repeat(10, 1fr); }
    .Grid.bp4-columns11 { grid-template-columns: repeat(11, 1fr); }
    .Grid.bp4-columns12 { grid-template-columns: repeat(12, 1fr); }
}

/* Cell expansion */

.gr-1 { grid-row: span 1; }
.gr-2 { grid-row: span 2; }
.gr-3 { grid-row: span 3; }
.gr-4 { grid-row: span 4; }
.gr-5 { grid-row: span 5; }
.gr-6 { grid-row: span 6; }
.gr-7 { grid-row: span 7; }
.gr-8 { grid-row: span 8; }
.gr-9 { grid-row: span 9; }
.gr-10 { grid-row: span 10; }
.gr-11 { grid-row: span 11; }
.gr-12 { grid-row: span 12; }

.gc-1 { grid-column: span 1; }
.gc-2 { grid-column: span 2; }
.gc-3 { grid-column: span 3; }
.gc-4 { grid-column: span 4; }
.gc-5 { grid-column: span 5; }
.gc-6 { grid-column: span 6; }
.gc-7 { grid-column: span 7; }
.gc-8 { grid-column: span 8; }
.gc-9 { grid-column: span 9; }
.gc-10 { grid-column: span 10; }
.gc-11 { grid-column: span 11; }
.gc-12 { grid-column: span 12; }