@layer root {
    :root {
        --margin-min-width: var(--body-item-spacing);
        --margin-max-width: 1fr;
    }

    main {
        --content-columns: 5;
        --gutter-width: 3rem;

        display: grid;
        grid-template-columns:
            [margin-left]
            minmax(var(--margin-min-width), var(--margin-max-width))
            [wide-content-start wide-content-left-start]
            1fr
            [wide-content-left-end gutter-start gutter-left-start]
            var(--gutter-width)
            [gutter-left-end content-start]
            repeat(var(--content-columns), min(calc((100% - 2 * var(--gutter-width)) / var(--content-columns)), calc(var(--content-width) / var(--content-columns))))
            [content-end gutter-right-start]
            var(--gutter-width)
            [gutter-right-end gutter-end wide-content-right-start]
            1fr
            [wide-content-right-end wide-content-end]
            minmax(var(--margin-min-width), var(--margin-max-width))
            [margin-right];
    }

    @media (max-width: 960px) {
        main {
            --margin-min-width: 0;
            --margin-max-width: 0;
        }
    }

    @media (max-width: 519px) {
        /* Collapse the margin and wide content tracks */
        main {
            --content-columns: 3;

            grid-template-columns:
                [margin-left wide-content-start wide-content-left-start wide-content-left-end gutter-start gutter-left-start]
                var(--gutter-width)
                [gutter-left-end content-start]
                repeat(var(--content-columns), min(calc((100% - 2 * var(--gutter-width)) / var(--content-columns)), calc(var(--content-width) / var(--content-columns))))
                [content-end gutter-right-start]
                var(--gutter-width)
                [gutter-right-end gutter-end wide-content-right-start wide-content-right-end wide-content-end margin-right];
        }
    }

    @media (max-width: 415px) {
        main {
            --content-columns: 1;

            display: grid;
            grid-template-columns:
                [margin-left wide-content-start wide-content-left-start wide-content-left-end gutter-start gutter-left-start]
                var(--gutter-width)
                [gutter-left-end content-start]
                calc(100% - 2 * var(--gutter-width))
                [content-end gutter-right-start]
                var(--gutter-width)
                [gutter-right-end gutter-end wide-content-right-start wide-content-right-end wide-content-end margin-right];
        }
    }

    main > :is(header, article, footer) {
        grid-column: gutter-start / gutter-end;
    }
}