/* temp */
section {
    /* background: gray; */
    margin-block: var(--space);
}

:where(header, section, footer) > * {
    background-image: url('https://res.cloudinary.com/demo/image/upload/cashew_chicken.jpg');
    background-size: cover;
    color: var(--color-01);
    /* text-shadow: 1px 1px 3px var(--color-02); */
}

:where(header, section, footer) {
    display: grid;
    row-gap: var(--content-gap);
    grid-template-columns:
        [viewport-start] 1fr
        [site-padding-start] var(--site-padding)
        [content-padding-start] var(--content-padding)
        [content-start]
            minmax(0, calc(var(--max-content-width) / 12))
            [one-twelfth]
            minmax(0, calc(var(--max-content-width) / 12))
            [two-twelfths one-sixth]
            minmax(0, calc(var(--max-content-width) / 12))
            [three-twelfths one-fourth fourth one-quarter]
            minmax(0, calc(var(--max-content-width) / 12))
            [four-twelfths one-third]
            minmax(0, calc(var(--max-content-width) / 12))
            [five-twelfths]
            minmax(0, calc(var(--max-content-width) / 12))
            [six-twelfths one-half half]
            minmax(0, calc(var(--max-content-width) / 12))
            [seven-twelfths]
            minmax(0, calc(var(--max-content-width) / 12))
            [eight-twelfths two-thirds]
            minmax(0, calc(var(--max-content-width) / 12))
            [nine-twelfths three-fourths third three-quarters]
            minmax(0, calc(var(--max-content-width) / 12))
            [ten-twelfths five-sixths]
            minmax(0, calc(var(--max-content-width) / 12))
            [eleven-twelfths]
            minmax(0, calc(var(--max-content-width) / 12))
        [content-end twelve-twelfths]
        var(--content-padding) [content-padding-end]
        var(--site-padding) [site-padding-end]
        1fr [viewport-end];

    > * {
        display: grid;
        grid-column: content-padding;
        grid-template-columns: subgrid;
        padding: var(--content-padding) 0;

        > * { grid-column: content; }

        &.full-viewport { grid-column: viewport !important; }

        &.half-content-left {
            grid-column-end: half !important;
            padding: var(--content-padding) var(--content-padding) var(--content-padding) 0;
        }
        &.half-content-right {
            grid-column-start: half !important;
            padding: var(--content-padding) 0 var(--content-padding) var(--content-padding);
            > * { grid-column-start: inherit; }
        }

        &.half-viewport-left {
            grid-column: viewport-start / half !important;
            padding: var(--content-padding) var(--content-padding) var(--content-padding) 0;
        }
        &.half-viewport-right {
            grid-column: half / viewport-end !important;
            padding: var(--content-padding) 0 var(--content-padding) var(--content-padding);
            > * { grid-column-start: inherit; }
        }

        &.remove-padding {
            grid-column: content;
            padding: 0;
        }

        &.remove-inline-padding {
            grid-column: content;
            padding: var(--content-padding) 0;
        }

        @media (max-width: 1240px) {
            &[class*="-left"] { grid-column-end: three-quarters !important; }
            &[class*="-right"] { grid-column-start: one-quarter !important; }
        }

        @media (max-width: 940px) {
            &[class*="-left"] { grid-column-end: five-sixths !important; }
            &[class*="-right"] { grid-column-start: one-sixth !important; }
        }

        @media (max-width: 640px) {
            &[class*="-left"] { grid-column-end: content-end !important; }
            &[class*="-right"] { grid-column-start: content-start !important; }
        }
    }
}