@layer layout {
    .layout-row {
        padding-block: var(--row-padding-top, calc(var(--section-padding) / 2)) var(--row-padding-bottom, calc(var(--section-padding) / 2));

        &:first-child {
            padding-block-start: var(--section-padding-first, var(--section-padding));
        }

        &:first-child:has(.hero--cover),
        &:has(.ticker),
        &.layout-row--flush {
            padding-block: 0;
        }

        body.has-transparent-header &:first-child {
            padding-block-start: 0;
        }

        &:last-child {
            padding-bottom: var(--section-padding-last, var(--spacing-xl));
        }
    }

    .layout-row:first-child:has(.hero--cover) + .layout-row,
    .layout-row.layout-row--flush + .layout-row {
        padding-block-start: var(--section-padding);
    }

    .layout-col--stacked {
        display: flex;
        flex-direction: column;
        gap: var(--col-gap, var(--section-padding));
    }

    @media (min-width: 768px) {
        .layout-row--cols > .container {
            display: flex;
            gap: var(--gutter);

            & > * {
                flex: 1 1 0;
                min-width: 0;
            }
        }

        .layout-row--grid > .container {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            column-gap: var(--grid-gap, 0px);
            padding-inline: 0;
        }

        .layout-row--grid .layout-col {
            padding-inline: var(--grid-col-padding, var(--gutter));
            min-width: 0;
        }

        .layout-col--stacked {
            gap: var(--col-gap, var(--section-padding));
        }

        .layout-col--sticky {
            position: sticky;
            align-self: start;
            top: var(--sidebar-top, calc(var(--header-visible, var(--header-height, 0px)) + var(--spacing-md)));
        }

        .layout-col[style*="--col-padding"] {
            padding: var(--col-padding);
        }

        .layout-col[style*="--col-radius"] {
            border-radius: var(--col-radius);
        }

        .layout-row--dividers .layout-col:not(:last-child):not(.layout-col--sticky) {
            border-right: 1px solid var(--color-border);
        }

        .layout-row--dividers .layout-col--sticky + .layout-col {
            border-left: 1px solid var(--color-border);
        }

        .layout-row--dividers.layout-row--cols > .container > *:not(:last-child) {
            position: relative;
            padding-right: var(--gutter);
        }

        .layout-row--dividers.layout-row--cols > .container > *:not(:last-child)::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 1px;
            background: var(--color-border);
        }
    }

    @media (max-width: 767px) {
        .layout-row--grid > .container {
            display: flex;
            flex-direction: column;
            gap: var(--grid-gap, 0px);
        }

        .layout-row--grid .layout-col {
            min-width: 0;
        }

        .layout-col--mobile-first {
            order: -1;
        }
    }

    .layout-row--surface {
        background: var(--color-surface);
    }

    .layout-row--primary {
        background: var(--color-primary);
        color: var(--color-on-primary);

        a {
            color: var(--color-on-primary);
        }
    }
}