@layer grid {

    [data-mr="layout"] {
        --mr-layout-gutter: var(--mr-gutter);
        --mr-layout-gap: var(--mr-gap-column);
        --mr-layout-rhythm: var(--mr-space-6);
        --mr-layout-band: var(--mr-space-6);
        --mr-layout-measure-prose: 66ch;
        --mr-layout-measure-page: var(--mr-container-xl);
        --mr-layout-measure-wide: var(--mr-container-xxl);
        display: flex;
        flex-direction: column;
        gap: var(--mr-layout-rhythm);

        container-type: inline-size;

        container-name: mr-layout mr-layout-row;
    }

    [data-mr="layout.row"] {
        --mr-layout-measure: var(--mr-layout-measure-page);
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));

        row-gap: var(--mr-layout-gap, var(--mr-gap-column));

        column-gap: min(
            var(--mr-layout-gap, var(--mr-gap-column)),
            calc((100% + 2 * var(--mr-layout-gutter, var(--mr-pad-page))) * 0.04)
        );
        padding-inline: max(var(--mr-layout-gutter, var(--mr-pad-page)), (100% - var(--mr-layout-measure, 100%)) / 2);

        container-type: inline-size;
    }

    [data-mr="layout.row"][data-mr-width="prose"] { --mr-layout-measure: var(--mr-layout-measure-prose); }
    [data-mr="layout.row"][data-mr-width="page"]  { --mr-layout-measure: var(--mr-layout-measure-page); }
    [data-mr="layout.row"][data-mr-width="wide"]  { --mr-layout-measure: var(--mr-layout-measure-wide); }
    [data-mr="layout.row"][data-mr-width="full"]  { --mr-layout-measure: 100%; }
    [data-mr="layout.row"][data-mr-width="bleed"] { --mr-layout-measure: 100%; --mr-layout-gutter: 0px; }

    [data-mr="layout.row"][data-mr-tone],
    [data-mr="layout.row"][data-mr-surface="flat"],
    [data-mr="layout.row"][data-mr-surface="outlined"],
    [data-mr="layout.row"][data-mr-surface="elevated"],
    [data-mr="layout.row"][data-mr-surface="accented"] { padding-block: var(--mr-layout-band, var(--mr-pad-block)); }

    [data-mr="layout.row"][data-mr-tone] {
        --mr-ground: var(--mr-tone-subtle);
        background-color: var(--mr-ground);
        color: var(--mr-tone-emphasis);
    }

    [data-mr="layout.row"][data-mr-tone="neutral"] { --mr-ground: var(--mr-recess-base, var(--mr-bg-sunken)); }

    [data-mr="layout.row"] > * {
        grid-column: span 12;
        min-inline-size: 0;
    }

    [data-mr="form.fields"] > * {
        grid-column: span 12;
        min-inline-size: 0;
    }

    @container mr-layout-row (max-inline-size: 35.999rem) {
        [data-mr="form.fields"] {
            grid-template-columns: minmax(0, 1fr);
            column-gap: 0;
        }
        [data-mr="form.fields"][data-mr="form.fields"] > * { grid-column: 1 / -1; }
    }

    [data-mr="layout.cell"] {
        grid-column: span 12;
        display: flex;
        flex-direction: column;
        gap: var(--mr-layout-rhythm, var(--mr-gap-section));
        min-inline-size: 0;
        container-type: inline-size;
        container-name: mr-layout-row;
    }

    [data-mr="layout.cell"][data-mr-tone],
    [data-mr="layout.cell"][data-mr-surface="flat"],
    [data-mr="layout.cell"][data-mr-surface="outlined"],
    [data-mr="layout.cell"][data-mr-surface="elevated"],
    [data-mr="layout.cell"][data-mr-surface="accented"] { padding: var(--mr-pad-block); }

    [data-mr="layout.cell"][data-mr-tone] {
        --mr-ground: var(--mr-tone-subtle);
        background-color: var(--mr-ground);
        color: var(--mr-tone-emphasis);
    }
    [data-mr="layout.cell"][data-mr-tone="neutral"] { --mr-ground: var(--mr-recess-base, var(--mr-bg-sunken)); }

    [data-mr="layout.cell"] > [data-mr="layout"] {
        container-name: mr-layout-row;
    }
    [data-mr="layout.cell"] > [data-mr="layout"] > [data-mr="layout.row"] {
        --mr-layout-gutter: 0px;
        --mr-layout-measure: 100%;
    }

    [data-mr-span="1"] { grid-column: span 1; }
    [data-mr-span="2"] { grid-column: span 2; }
    [data-mr-span="3"] { grid-column: span 3; }
    [data-mr-span="4"] { grid-column: span 4; }
    [data-mr-span="5"] { grid-column: span 5; }
    [data-mr-span="6"] { grid-column: span 6; }
    [data-mr-span="7"] { grid-column: span 7; }
    [data-mr-span="8"] { grid-column: span 8; }
    [data-mr-span="9"] { grid-column: span 9; }
    [data-mr-span="10"] { grid-column: span 10; }
    [data-mr-span="11"] { grid-column: span 11; }
    [data-mr-span="12"] { grid-column: span 12; }

    [data-mr-span-xlarge="1"] { grid-column: span 1; }
    [data-mr-span-xlarge="2"] { grid-column: span 2; }
    [data-mr-span-xlarge="3"] { grid-column: span 3; }
    [data-mr-span-xlarge="4"] { grid-column: span 4; }
    [data-mr-span-xlarge="5"] { grid-column: span 5; }
    [data-mr-span-xlarge="6"] { grid-column: span 6; }
    [data-mr-span-xlarge="7"] { grid-column: span 7; }
    [data-mr-span-xlarge="8"] { grid-column: span 8; }
    [data-mr-span-xlarge="9"] { grid-column: span 9; }
    [data-mr-span-xlarge="10"] { grid-column: span 10; }
    [data-mr-span-xlarge="11"] { grid-column: span 11; }
    [data-mr-span-xlarge="12"] { grid-column: span 12; }

    @container mr-layout (max-inline-size: 89.999rem) {
        [data-mr-span-desktop="1"] { grid-column: span 1; }
        [data-mr-span-desktop="2"] { grid-column: span 2; }
        [data-mr-span-desktop="3"] { grid-column: span 3; }
        [data-mr-span-desktop="4"] { grid-column: span 4; }
        [data-mr-span-desktop="5"] { grid-column: span 5; }
        [data-mr-span-desktop="6"] { grid-column: span 6; }
        [data-mr-span-desktop="7"] { grid-column: span 7; }
        [data-mr-span-desktop="8"] { grid-column: span 8; }
        [data-mr-span-desktop="9"] { grid-column: span 9; }
        [data-mr-span-desktop="10"] { grid-column: span 10; }
        [data-mr-span-desktop="11"] { grid-column: span 11; }
        [data-mr-span-desktop="12"] { grid-column: span 12; }
    }

    @container mr-layout (max-inline-size: 59.999rem) {
        [data-mr-span-tablet="1"] { grid-column: span 1; }
        [data-mr-span-tablet="2"] { grid-column: span 2; }
        [data-mr-span-tablet="3"] { grid-column: span 3; }
        [data-mr-span-tablet="4"] { grid-column: span 4; }
        [data-mr-span-tablet="5"] { grid-column: span 5; }
        [data-mr-span-tablet="6"] { grid-column: span 6; }
        [data-mr-span-tablet="7"] { grid-column: span 7; }
        [data-mr-span-tablet="8"] { grid-column: span 8; }
        [data-mr-span-tablet="9"] { grid-column: span 9; }
        [data-mr-span-tablet="10"] { grid-column: span 10; }
        [data-mr-span-tablet="11"] { grid-column: span 11; }
        [data-mr-span-tablet="12"] { grid-column: span 12; }
    }

    @container mr-layout (max-inline-size: 47.999rem) {
        [data-mr-span-mobile-h="1"] { grid-column: span 1; }
        [data-mr-span-mobile-h="2"] { grid-column: span 2; }
        [data-mr-span-mobile-h="3"] { grid-column: span 3; }
        [data-mr-span-mobile-h="4"] { grid-column: span 4; }
        [data-mr-span-mobile-h="5"] { grid-column: span 5; }
        [data-mr-span-mobile-h="6"] { grid-column: span 6; }
        [data-mr-span-mobile-h="7"] { grid-column: span 7; }
        [data-mr-span-mobile-h="8"] { grid-column: span 8; }
        [data-mr-span-mobile-h="9"] { grid-column: span 9; }
        [data-mr-span-mobile-h="10"] { grid-column: span 10; }
        [data-mr-span-mobile-h="11"] { grid-column: span 11; }
        [data-mr-span-mobile-h="12"] { grid-column: span 12; }
    }

    @container mr-layout (max-inline-size: 29.999rem) {
        [data-mr-span-mobile-v="1"] { grid-column: span 1; }
        [data-mr-span-mobile-v="2"] { grid-column: span 2; }
        [data-mr-span-mobile-v="3"] { grid-column: span 3; }
        [data-mr-span-mobile-v="4"] { grid-column: span 4; }
        [data-mr-span-mobile-v="5"] { grid-column: span 5; }
        [data-mr-span-mobile-v="6"] { grid-column: span 6; }
        [data-mr-span-mobile-v="7"] { grid-column: span 7; }
        [data-mr-span-mobile-v="8"] { grid-column: span 8; }
        [data-mr-span-mobile-v="9"] { grid-column: span 9; }
        [data-mr-span-mobile-v="10"] { grid-column: span 10; }
        [data-mr-span-mobile-v="11"] { grid-column: span 11; }
        [data-mr-span-mobile-v="12"] { grid-column: span 12; }
    }

    [data-mr="layout.row"] { align-items: stretch; }
    [data-mr="layout.row"][data-mr-anchor="top"] { align-items: start; }
    [data-mr="layout.row"][data-mr-anchor="center"] { align-items: center; }
    [data-mr="layout.row"][data-mr-anchor="bottom"] { align-items: end; }
    [data-mr="layout.row"][data-mr-anchor="stretch"] { align-items: stretch; }

}