:root,
::selection,
::backdrop {
    --viewport-width: 100vw;
    --breakpoint-width: var(--viewport-width);
    --container-width: calc(var(--breakpoint-width) - var(--gutter) / 2);
    --container-padding: calc(
        (var(--viewport-width) - var(--container-width) - var(--gutter)) / 2
    );
    --viewport-height: 100vh;
    --content-height: calc(var(--viewport-height) - var(--header-height, 0));
}
@media (min-width: 540px) {
    :root,
    ::selection,
    ::backdrop {
        --breakpoint-width: 540px;
        --container-width: 516px;
        --container-width: calc(var(--breakpoint-width) - var(--gutter));
    }
}
@media (min-width: 744px) {
    :root,
    ::selection,
    ::backdrop {
        --breakpoint-width: 744px;
        --container-width: 720px;
    }
}
@media (min-width: 960px) {
    :root,
    ::selection,
    ::backdrop {
        --breakpoint-width: 960px;
        --container-width: 924px;
    }
}
@media (min-width: 1260px) {
    :root,
    ::selection,
    ::backdrop {
        --breakpoint-width: 1260px;
        --container-width: 1200px;
    }
}

:where(
        [layout="full"],
        [data-layout="full"],
        [layout="0"],
        [data-layout="0"],
        .layout-full,
        .container-fluid,
        [layout="contain"],
        [data-layout="contain"],
        [layout="1"],
        [data-layout="1"],
        .layout-contain,
        .container,

    )
    > * {
    margin-inline: auto;
    padding-inline: calc(var(--gutter) / 2);
    inline-size: 100%;
}

:where(
        [layout="contain"],
        [data-layout="contain"],
        [layout="1"],
        [data-layout="1"],
        .layout-contain,
        .container
    )
    > * {
    max-inline-size: var(--container-width) !important;
}