/**
 * @file Grid Columns
 * @description Column presets and responsive ratios.
 *
 * @usage
 * <!-- Emmet: ul.g.g-3>li.clk*6>article.crd | article.g.g-2-1>(div+figure) -->
 */

:where(.g-1) {
    --g-cols: 1;
}

:where(.g-1--lg, .g-1--mdl) {
    --g-cols--lg: 1;
}

:where(.g-1--md, .g-1--smd, .g-1--mdl),
:where(.g-1-2, .g-2-1, .g-1-3, .g-3-1, .g-2-3, .g-3-2) {
    --g-cols--md: 1;
}

:where(.g-1--sm, .g-1--smd) {
    --g-cols--sm: 1;
}

:where(.g-2) {
    --g-cols--lg: 2;
    --g-cols--sm: 1;
    --g-cols--md: 1;
}

:where(.g-2--lg, .g-2--mdl) {
    --g-cols--lg: 2;
}

:where(.g-2--md, .g-2--smd, .g-2--mdl) {
    --g-cols--md: 2;
}

:where(.g-2--sm, .g-2--smd) {
    --g-cols--sm: 2;
}

:where(.g-3) {
    --g-cols--lg: 3;
    --g-cols--md: 2;
    --g-cols--sm: 1;
    --g-min--lg: var(---xc, clamp(10rem, calc(10rem + 2 * (100cqi - 33rem) / 55), 12rem));
}

:where(.g-3--lg, .g-3--mdl) {
    --g-cols--lg: 3;
    --g-min--lg: var(---xc, clamp(10rem, calc(10rem + 2 * (100cqi - 33rem) / 55), 12rem));
}

:where(.g-3--md, .g-3--mdl, .g-3--smd) {
    --g-cols--md: 3;
    --g-min--md: var(---c, clamp(8rem, calc(8rem + 2 * (100cqi - 33rem) / 55), 10rem));
}

:where(.g-3--sm, .g-3--smd) {
    --g-cols--sm: 3;
    --g-min--sm: var(---xg, clamp(5rem, calc(5rem + 1 * (100cqi - 33rem) / 55), 6rem));
}

:where(.g-4) {
    --g-cols--lg: 4;
    --g-cols--md: 2;
    --g-cols--sm: 1;
    --g-min--lg: var(---c, clamp(8rem, calc(8rem + 2 * (100cqi - 33rem) / 55), 10rem));
    --g-min--md: var(---2xc, clamp(12rem, calc(12rem + 4 * (100cqi - 33rem) / 55), 16rem));
}

:where(.g-4--lg, .g-4--mdl) {
    --g-cols--lg: 4;
    --g-min--lg: var(---c, clamp(8rem, calc(8rem + 2 * (100cqi - 33rem) / 55), 10rem));
}

:where(.g-4--md, .g-4--mdl, .g-4--smd) {
    --g-cols--md: 4;
    --g-min--md: var(---2xe, clamp(3.5rem, calc(3.5rem + 0.5 * (100cqi - 33rem) / 55), 4rem));
}

:where(.g-4--sm, .g-4--smd) {
    --g-cols--sm: 4;
    --g-min--sm: var(---e, clamp(2.5rem, calc(2.5rem + 0.5 * (100cqi - 33rem) / 55), 3rem));
}

:where(.g-5) {
    --g-cols--lg: 5;
    --g-cols--md: 3;
    --g-cols--sm: 1;
    --g-min--lg: var(---2xe, clamp(3.5rem, calc(3.5rem + 0.5 * (100cqi - 33rem) / 55), 4rem));
    --g-min--md: var(---c, clamp(8rem, calc(8rem + 2 * (100cqi - 33rem) / 55), 10rem));
}

:where(.g-5--lg, .g-5--mdl) {
    --g-cols--lg: 5;
    --g-min--lg: var(---2xe, clamp(3.5rem, calc(3.5rem + 0.5 * (100cqi - 33rem) / 55), 4rem));
}

:where(.g-5--md, .g-5--mdl) {
    --g-cols--md: 5;
    --g-min--md: var(---3xl, clamp(2.25rem, calc(2.25rem + 0.25 * (100cqi - 33rem) / 55), 2.5rem));
}

:where(.g-6) {
    --g-cols--lg: 6;
    --g-cols--md: 4;
    --g-cols--sm: 2;
    --g-min--lg: var(---3xl, clamp(2.25rem, calc(2.25rem + 0.25 * (100cqi - 33rem) / 55), 2.5rem));
    --g-min--md: var(---3xl, clamp(2.25rem, calc(2.25rem + 0.25 * (100cqi - 33rem) / 55), 2.5rem));
    --g-min--sm: var(---xl, clamp(1.75rem, calc(1.75rem + 0.25 * (100cqi - 33rem) / 55), 2rem));
}

:where(.g-6--lg, .g-6--mdl) {
    --g-cols--lg: 6;
    --g-min--lg: var(---3xl, clamp(2.25rem, calc(2.25rem + 0.25 * (100cqi - 33rem) / 55), 2.5rem));
}

:where(.g-6--md, .g-6--mdl) {
    --g-cols--md: 6;
    --g-min--md: var(---xl, clamp(1.75rem, calc(1.75rem + 0.25 * (100cqi - 33rem) / 55), 2rem));
}

:where(.g-8) {
    --g-cols--lg: 8;
    --g-cols--md: 4;
    --g-cols--sm: 2;
    --g-min--lg: var(---m, clamp(1.25rem, calc(1.25rem + 0.25 * (100cqi - 33rem) / 55), 1.5rem));
    --g-min--md: var(---xl, clamp(1.75rem, calc(1.75rem + 0.25 * (100cqi - 33rem) / 55), 2rem));
    --g-min--sm: var(---3xl, clamp(2.25rem, calc(2.25rem + 0.25 * (100cqi - 33rem) / 55), 2.5rem));
}

:where(.g-8--lg, .g-8--mdl) {
    --g-cols--lg: 8;
    --g-min--lg: var(---m, clamp(1.25rem, calc(1.25rem + 0.25 * (100cqi - 33rem) / 55), 1.5rem));
}

:where(.g-8--md, .g-8--mdl) {
    --g-cols--md: 4;
    --g-min--md: var(---m, clamp(1.25rem, calc(1.25rem + 0.25 * (100cqi - 33rem) / 55), 1.5rem));
}

:where(.g-9) {
    --g-cols--lg: 9;
    --g-cols--md: 6;
    --g-cols--sm: 3;
    --g-min--lg: var(---m, clamp(1.25rem, calc(1.25rem + 0.25 * (100cqi - 33rem) / 55), 1.5rem));
    --g-min--md: var(---xl, clamp(1.75rem, calc(1.75rem + 0.25 * (100cqi - 33rem) / 55), 2rem));
    --g-min--sm: var(---3xl, clamp(2.25rem, calc(2.25rem + 0.25 * (100cqi - 33rem) / 55), 2.5rem));
}

:where(.g-9--lg, .g-9--mdl) {
    --g-cols--lg: 9;
    --g-min--lg: var(---m, clamp(1.25rem, calc(1.25rem + 0.25 * (100cqi - 33rem) / 55), 1.5rem));
}

:where(.g-9--md, .g-9--mdl) {
    --g-cols--md: 9;
    --g-min--md: var(---m, clamp(1.25rem, calc(1.25rem + 0.25 * (100cqi - 33rem) / 55), 1.5rem));
}

/* Grid 1:2 and 2:1 Ratio */

:where(.g-1-2, .g-2-1, .g-1-2--lg, .g-2-1--lg, .g-1-2--mdl, .g-2-1--mdl) {
    --g-cols--lg: 3;
    --g-min--lg: var(---xc, clamp(10rem, calc(10rem + 2 * (100cqi - 33rem) / 55), 12rem));
}

:where(.g-1-2--md, .g-2-1--md, .g-1-2--mdl, .g-2-1--mdl) {
    --g-cols--md: 3;
    --g-min--md: var(---c, clamp(8rem, calc(8rem + 2 * (100cqi - 33rem) / 55), 10rem));
}

:where(.g-1-2, .g-1-2--lg, .g-1-2--mdl)> :where(*:nth-child(odd), .gc:nth-child(odd)) {
    --gi-col--lg: span 1;
}

:where(.g-1-2, .g-1-2--lg, .g-1-2--mdl)> :where(*:nth-child(even), .gc:nth-child(even)) {
    --gi-col--lg: span 2;
}

:where(.g-1-2--md, .g-1-2--mdl)> :where(*:nth-child(odd), .gc:nth-child(odd)) {
    --gi-col--md: span 1;
}

:where(.g-1-2--md, .g-1-2--mdl)> :where(*:nth-child(even), .gc:nth-child(even)) {
    --gi-col--md: span 2;
}

:where(.g-2-1, .g-2-1--lg, .g-2-1--mdl)> :where(*:nth-child(odd), .gc:nth-child(odd)) {
    --gi-col--lg: span 2;
}

:where(.g-2-1, .g-2-1--lg, .g-2-1--mdl)> :where(*:nth-child(even), .gc:nth-child(even)) {
    --gi-col--lg: span 1;
}

:where(.g-2-1--md, .g-2-1--mdl)> :where(*:nth-child(odd), .gc:nth-child(odd)) {
    --gi-col--md: span 2;
}

:where(.g-2-1--md, .g-2-1--mdl)> :where(*:nth-child(even), .gc:nth-child(even)) {
    --gi-col--md: span 1;
}

/* Grid 2:3 and 3:2 Ratio */

:where(.g-2-3, .g-3-2, .g-2-3--lg, .g-3-2--lg, .g-2-3--mdl, .g-3-2--mdl) {
    --g-cols--lg: 5;
    --g-min--lg: var(---2xe, clamp(3.5rem, calc(3.5rem + 0.5 * (100cqi - 33rem) / 55), 4rem));
}

:where(.g-2-3, .g-3-2, .g-2-3--md, .g-3-2--md, .g-2-3--mdl, .g-3-2--mdl) {
    --g-cols--md: 5;
    --g-min--md: var(---3xl, clamp(2.25rem, calc(2.25rem + 0.25 * (100cqi - 33rem) / 55), 2.5rem));
}

:where(.g-2-3, .g-2-3--lg, .g-2-3--mdl)> :where(*:nth-child(odd), .gc:nth-child(odd)) {
    --gi-col--lg: span 2;
}

:where(.g-2-3, .g-2-3--lg, .g-2-3--mdl)> :where(*:nth-child(even), .gc:nth-child(even)) {
    --gi-col--lg: span 3;
}

:where(.g-2-3--md, .g-2-3--mdl)> :where(*:nth-child(odd), .gc:nth-child(odd)) {
    --gi-col--md: span 2;
}

:where(.g-2-3--md, .g-2-3--mdl)> :where(*:nth-child(even), .gc:nth-child(even)) {
    --gi-col--md: span 3;
}

:where(.g-3-2, .g-3-2--lg, .g-3-2--mdl)> :where(*:nth-child(odd), .gc:nth-child(odd)) {
    --gi-col--lg: span 3;
}

:where(.g-3-2, .g-3-2--lg, .g-3-2--mdl)> :where(*:nth-child(even), .gc:nth-child(even)) {
    --gi-col--lg: span 2;
}

:where(.g-3-2--md, .g-3-2--mdl)> :where(*:nth-child(odd), .gc:nth-child(odd)) {
    --gi-col--md: span 3;
}

:where(.g-3-2--md, .g-3-2--mdl)> :where(*:nth-child(even), .gc:nth-child(even)) {
    --gi-col--md: span 2;
}

/* Grid 1:3 and 3:1 Ratio */

:where(.g-1-3, .g-3-1, .g-1-3--lg, .g-1-3--mdl, .g-3-1--lg, .g-3-1--mdl) {
    --g-cols--lg: 4;
    --g-min--lg: var(---c, clamp(8rem, calc(8rem + 2 * (100cqi - 33rem) / 55), 10rem));
}

:where(.g-1-3--md, .g-1-3--mdl, .g-3-1--md, .g-3-1--mdl) {
    --g-cols--md: 4;
    --g-min--md: var(---3xl, clamp(2.25rem, calc(2.25rem + 0.25 * (100cqi - 33rem) / 55), 2.5rem));
}

:where(.g-1-3, .g-1-3--lg, .g-1-3--mdl)> :where(*:nth-child(odd), .gc:nth-child(odd)) {
    --gi-col--lg: span 1;
}

:where(.g-1-3, .g-1-3--lg, .g-1-3--mdl)> :where(*:nth-child(even), .gc:nth-child(even)) {
    --gi-col--lg: span 3;
}


:where(.g-1-3--md, .g-1-3--mdl)> :where(*:nth-child(odd), .gc:nth-child(odd)) {
    --gi-col--md: span 1;
}

:where(.g-1-3--md, .g-1-3--mdl)> :where(*:nth-child(even), .gc:nth-child(even)) {
    --gi-col--md: span 3;
}

:where(.g-3-1, .g-3-1--lg, .g-3-1--mdl)> :where(*:nth-child(odd), .gc:nth-child(odd)) {
    --gi-col--lg: span 3;
}

:where(.g-3-1, .g-3-1--lg, .g-3-1--mdl)> :where(*:nth-child(even), .gc:nth-child(even)) {
    --gi-col--lg: span 1;
}

:where(.g-3-1--md, .g-3-1--mdl)> :where(*:nth-child(odd), .gc:nth-child(odd)) {
    --gi-col--md: span 3;
}

:where(.g-3-1--md, .g-3-1--mdl)> :where(*:nth-child(even), .gc:nth-child(even)) {
    --gi-col--md: span 1;
}

/* Grid 1:4 and 4:1 Ratio */

:where(.g-1-4, .g-4-1, .g-1-4--lg, .g-1-4--mdl, .g-4-1--lg, .g-4-1--mdl) {
    --g-cols--lg: 5;
    --g-min--lg: var(---c, clamp(8rem, calc(8rem + 2 * (100cqi - 33rem) / 55), 10rem));
}

:where(.g-1-4--md, .g-1-4--mdl, .g-4-1--md, .g-4-1--mdl) {
    --g-cols--md: 5;
    --g-min--md: var(---3xl, clamp(2.25rem, calc(2.25rem + 0.25 * (100cqi - 33rem) / 55), 2.5rem));
}

:where(.g-1-4, .g-1-4--lg, .g-1-4--mdl)> :where(*:nth-child(odd), .gc:nth-child(odd)) {
    --gi-col--lg: span 1;
}

:where(.g-1-4, .g-1-4--lg, .g-1-4--mdl)> :where(*:nth-child(even), .gc:nth-child(even)) {
    --gi-col--lg: span 4;
}


:where(.g-1-4--md, .g-1-4--mdl)> :where(*:nth-child(odd), .gc:nth-child(odd)) {
    --gi-col--md: span 1;
}

:where(.g-1-4--md, .g-1-4--mdl)> :where(*:nth-child(even), .gc:nth-child(even)) {
    --gi-col--md: span 4;
}

:where(.g-4-1, .g-4-1--lg, .g-4-1--mdl)> :where(*:nth-child(odd), .gc:nth-child(odd)) {
    --gi-col--lg: span 4;
}

:where(.g-4-1, .g-4-1--lg, .g-4-1--mdl)> :where(*:nth-child(even), .gc:nth-child(even)) {
    --gi-col--lg: span 1;
}

:where(.g-4-1--md, .g-4-1--mdl)> :where(*:nth-child(odd), .gc:nth-child(odd)) {
    --gi-col--md: span 4;
}

:where(.g-4-1--md, .g-4-1--mdl)> :where(*:nth-child(even), .gc:nth-child(even)) {
    --gi-col--md: span 1;
}

/* Grid of 12 */

:where(.g-12) {
    --g-cols--lg: 12;
    --g-cols--md: 6;
    --g-cols--sm: 3;
    --g-min--lg: var(---3xs, clamp(0.625rem, calc(0.625rem + 0.125 * (100cqi - 33rem) / 55), 0.75rem));
    --g-min--md: var(---xl, clamp(1.75rem, calc(1.75rem + 0.25 * (100cqi - 33rem) / 55), 2rem));
    --g-min--sm: var(---m, clamp(1.25rem, calc(1.25rem + 0.25 * (100cqi - 33rem) / 55), 1.5rem));
}

:where(.g-12--lg) {
    --g-cols--lg: 12;
    --g-min--lg: var(---3xs, clamp(0.625rem, calc(0.625rem + 0.125 * (100cqi - 33rem) / 55), 0.75rem));
}

/* Sidebar Right */

:where(.g.sr, .g-sr, [data-recipe="sidebar-right"]) {
    --g-sb-main: 1fr;
    --g-sb-side: minmax(var(---3xc, clamp(16rem, calc(16rem + 4 * (100cqi - 33rem) / 55), 20rem)), 25%);

    --gtc--lg: var(--g-sb-main) var(--g-sb-side);
    --g-cols--md: 1;
    --g-cols--sm: 1;
}

/* Sidebar Left */

:where(.g.sl, .g-sl, [data-recipe="sidebar-left"]) {
    --g-sb-main: 1fr;
    --g-sb-side: minmax(var(---3xc, clamp(16rem, calc(16rem + 4 * (100cqi - 33rem) / 55), 20rem)), 25%);

    --gtc--lg: var(--g-sb-side) var(--g-sb-main);
    --g-cols--md: 1;
    --g-cols--sm: 1;
}
