/**
 * @file Grid Item (Column and Row) Placement
 * @description Child placement utilities (.gc-* / .gr-*) and generic grid item rules.
 *
 * @usage
 * <!-- Emmet: ul.g.g-4>(li.gc-2)*2 -->
 */

/* Span 1 column */
:where(.gc-1) {
    --gi-col: span 1;
}

:where(.gc-1--sm, .gc-1--smd) {
    --gi-col--sm: span 1;
}

:where(.gc-1--md, .gc-1--smd, .gc-1--mdl) {
    --gi-col--md: span 1;
}

:where(.gc-1--lg, .gc-1--mdl) {
    --gi-col--lg: span 1;
}

/* Span 2 columns */
:where(.gc-2) {
    --gi-col: span 2;
}

:where(.gc-2--sm, .gc-2--smd) {
    --gi-col--sm: span 2;
}

:where(.gc-2--md, .gc-2--smd, .gc-2--mdl) {
    --gi-col--md: span 2;
}

:where(.gc-2--lg, .gc-2--mdl) {
    --gi-col--lg: span 2;
}

/* Span 3 columns */
:where(.gc-3) {
    --gi-col: span 3;
}

:where(.gc-3--sm, .gc-3--smd) {
    --gi-col--sm: span 3;
}

:where(.gc-3--md, .gc-3--smd, .gc-3--mdl) {
    --gi-col--md: span 3;
}

:where(.gc-3--lg, .gc-3--mdl) {
    --gi-col--lg: span 3;
}

/* Span 4 columns */
:where(.gc-4) {
    --gi-col: span 4;
}

:where(.gc-4--sm, .gc-4--smd) {
    --gi-col--sm: span 4;
}

:where(.gc-4--md, .gc-4--smd, .gc-4--mdl) {
    --gi-col--md: span 4;
}

:where(.gc-4--lg, .gc-4--mdl) {
    --gi-col--lg: span 4;
}

/* Span 5 columns */
:where(.gc-5) {
    --gi-col: span 5;
}

:where(.gc-5--sm, .gc-5--smd) {
    --gi-col--sm: span 5;
}

:where(.gc-5--md, .gc-5--smd, .gc-5--mdl) {
    --gi-col--md: span 5;
}

:where(.gc-5--lg, .gc-5--mdl) {
    --gi-col--lg: span 5;
}

/* Span 6 columns */
:where(.gc-6) {
    --gi-col: span 6;
}

:where(.gc-6--sm, .gc-6--smd) {
    --gi-col--sm: span 6;
}

:where(.gc-6--md, .gc-6--smd, .gc-6--mdl) {
    --gi-col--md: span 6;
}

:where(.gc-6--lg, .gc-6--mdl) {
    --gi-col--lg: span 6;
}

/* Span 7 columns */
:where(.gc-7) {
    --gi-col: span 7;
}

:where(.gc-7--sm, .gc-7--smd) {
    --gi-col--sm: span 7;
}

:where(.gc-7--md, .gc-7--smd, .gc-7--mdl) {
    --gi-col--md: span 7;
}

:where(.gc-7--lg, .gc-7--mdl) {
    --gi-col--lg: span 7;
}

/* Span 8 columns */
:where(.gc-8) {
    --gi-col: span 8;
}

:where(.gc-8--sm, .gc-8--smd) {
    --gi-col--sm: span 8;
}

:where(.gc-8--md, .gc-8--smd, .gc-8--mdl) {
    --gi-col--md: span 8;
}

:where(.gc-8--lg, .gc-8--mdl) {
    --gi-col--lg: span 8;
}

/* Span 9 columns */
:where(.gc-9) {
    --gi-col: span 9;
}

:where(.gc-9--sm, .gc-9--smd) {
    --gi-col--sm: span 9;
}

:where(.gc-9--md, .gc-9--smd, .gc-9--mdl) {
    --gi-col--md: span 9;
}

:where(.gc-9--lg, .gc-9--mdl) {
    --gi-col--lg: span 9;
}

/* Span 10 columns */
:where(.gc-10) {
    --gi-col: span 10;
}

:where(.gc-10--sm, .gc-10--smd) {
    --gi-col--sm: span 10;
}

:where(.gc-10--md, .gc-10--smd, .gc-10--mdl) {
    --gi-col--md: span 10;
}

:where(.gc-10--lg, .gc-10--mdl) {
    --gi-col--lg: span 10;
}

/* Span 11 columns */
:where(.gc-11) {
    --gi-col: span 11;
}

:where(.gc-11--sm, .gc-11--smd) {
    --gi-col--sm: span 11;
}

:where(.gc-11--md, .gc-11--smd, .gc-11--mdl) {
    --gi-col--md: span 11;
}

:where(.gc-11--lg, .gc-11--mdl) {
    --gi-col--lg: span 11;
}

/* Span 12 columns */
:where(.gc-12) {
    --gi-col: span 12;
}

:where(.gc-12--sm, .gc-12--smd) {
    --gi-col--sm: span 12;
}

:where(.gc-12--md, .gc-12--smd, .gc-12--mdl) {
    --gi-col--md: span 12;
}

:where(.gc-12--lg, .gc-12--mdl) {
    --gi-col--lg: span 12;
}

/* Span 1 row */
:where(.gr-1) {
    --gi-row: span 1;
}

:where(.gr-1--sm, .gr-1--smd) {
    --gi-row--sm: span 1;
}

:where(.gr-1--md, .gr-1--smd, .gr-1--mdl) {
    --gi-row--md: span 1;
}

:where(.gr-1--lg, .gr-1--mdl) {
    --gi-row--lg: span 1;
}

/* Span 2 rows */
:where(.gr-2) {
    --gi-row: span 2;
}

:where(.gr-2--sm, .gr-2--smd) {
    --gi-row--sm: span 2;
}

:where(.gr-2--md, .gr-2--smd, .gr-2--mdl) {
    --gi-row--md: span 2;
}

:where(.gr-2--lg, .gr-2--mdl) {
    --gi-row--lg: span 2;
}

/* Span 3 rows */
:where(.gr-3) {
    --gi-row: span 3;
}

:where(.gr-3--sm, .gr-3--smd) {
    --gi-row--sm: span 3;
}

:where(.gr-3--md, .gr-3--smd, .gr-3--mdl) {
    --gi-row--md: span 3;
}

:where(.gr-3--lg, .gr-3--mdl) {
    --gi-row--lg: span 3;
}

/* Span 4 rows */
:where(.gr-4) {
    --gi-row: span 4;
}

:where(.gr-4--sm, .gr-4--smd) {
    --gi-row--sm: span 4;
}

:where(.gr-4--md, .gr-4--smd, .gr-4--mdl) {
    --gi-row--md: span 4;
}

:where(.gr-4--lg, .gr-4--mdl) {
    --gi-row--lg: span 4;
}

/* Span 5 rows */
:where(.gr-5) {
    --gi-row: span 5;
}

:where(.gr-5--sm, .gr-5--smd) {
    --gi-row--sm: span 5;
}

:where(.gr-5--md, .gr-5--smd, .gr-5--mdl) {
    --gi-row--md: span 5;
}

:where(.gr-5--lg, .gr-5--mdl) {
    --gi-row--lg: span 5;
}

/* Full column */
:where(.gc-f) {
    --gi-col: 1 / -1;
}

:where(.gc-f--sm, .gc-f--smd) {
    --gi-col--sm: 1 / -1;
}

:where(.gc-f--md, .gc-f--smd, .gc-f--mdl) {
    --gi-col--md: 1 / -1;
}

:where(.gc-f--lg, .gc-f--mdl) {
    --gi-col--lg: 1 / -1;
}

/* Full row */
:where(.gr-f) {
    --gi-row: 1 / -1;
}

:where(.gr-f--sm, .gr-f--smd) {
    --gi-row--sm: 1 / -1;
}

:where(.gr-f--md, .gr-f--smd, .gr-f--mdl) {
    --gi-row--md: 1 / -1;
}

:where(.gr-f--lg, .gr-f--mdl) {
    --gi-row--lg: 1 / -1;
}