.bw-page-layout {
    --bw-page-sidebar-width: 18rem;
    --bw-page-inline-gutter: 1rem;
    --bw-page-col-gap: clamp(1rem, 2.5vw, 2rem);
    --bw-page-layout-sidebar-total: 0rem;
    --bw-page-layout-sidebar-gap-total: 0rem;
    --bw-page-bg-bleed-shift: 0px;
    --bw-page-content-max: max(16rem, calc(var(--bw-page-max-layout) - var(--bw-page-layout-sidebar-total) - var(--bw-page-layout-sidebar-gap-total)));
    display: grid;
    width: 100%;
    margin-inline: auto;
    overflow-x: clip;
    grid-template-columns:
        [full-start] minmax(var(--bw-page-inline-gutter), 1fr)
        [sidebar-left-start] 0
        [sidebar-left-end content-start] minmax(0, var(--bw-page-content-max))
        [content-end sidebar-right-start] 0
        [sidebar-right-end] minmax(var(--bw-page-inline-gutter), 1fr)
        [full-end];
    column-gap: var(--bw-page-col-gap);
    row-gap: 0;
    align-items: start;
}

@supports not (overflow: clip) {
    .bw-page-layout {
        overflow-x: hidden;
    }
}

.bw-page-layout.has-left-sidebar {
    --bw-page-layout-sidebar-total: var(--bw-page-sidebar-width);
    --bw-page-layout-sidebar-gap-total: var(--bw-page-col-gap);
    --bw-page-bg-bleed-shift: calc(var(--bw-page-sidebar-width) / -2);
    grid-template-columns:
        [full-start] minmax(var(--bw-page-inline-gutter), 1fr)
        [sidebar-left-start] var(--bw-page-sidebar-width)
        [sidebar-left-end content-start] minmax(0, var(--bw-page-content-max))
        [content-end sidebar-right-start] 0
        [sidebar-right-end] minmax(var(--bw-page-inline-gutter), 1fr)
        [full-end];
}

.bw-page-layout.has-right-sidebar {
    --bw-page-layout-sidebar-total: var(--bw-page-sidebar-width);
    --bw-page-layout-sidebar-gap-total: var(--bw-page-col-gap);
    --bw-page-bg-bleed-shift: calc(var(--bw-page-sidebar-width) / 2);
    grid-template-columns:
        [full-start] minmax(var(--bw-page-inline-gutter), 1fr)
        [sidebar-left-start] 0
        [sidebar-left-end content-start] minmax(0, var(--bw-page-content-max))
        [content-end sidebar-right-start] var(--bw-page-sidebar-width)
        [sidebar-right-end] minmax(var(--bw-page-inline-gutter), 1fr)
        [full-end];
}

.bw-page-layout.has-left-sidebar.has-right-sidebar {
    --bw-page-layout-sidebar-total: calc(var(--bw-page-sidebar-width) * 2);
    --bw-page-layout-sidebar-gap-total: calc(var(--bw-page-col-gap) * 2);
    --bw-page-bg-bleed-shift: 0px;
    grid-template-columns:
        [full-start] minmax(var(--bw-page-inline-gutter), 1fr)
        [sidebar-left-start] var(--bw-page-sidebar-width)
        [sidebar-left-end content-start] minmax(0, var(--bw-page-content-max))
        [content-end sidebar-right-start] var(--bw-page-sidebar-width)
        [sidebar-right-end] minmax(var(--bw-page-inline-gutter), 1fr)
        [full-end];
}

.bw-page-layout__sidebar {
    position: sticky;
    top: var(--bw-toc-offset, 5rem);
    align-self: start;
    grid-row: 1;
    width: var(--bw-page-sidebar-width);
    max-width: 100%;
}

.bw-page-layout__sidebar--left {
    grid-column: sidebar-left-start / sidebar-left-end;
}

.bw-page-layout__sidebar--right {
    grid-column: sidebar-right-start / sidebar-right-end;
}

.bw-page-layout__content {
    display: contents;
}

.bw-page-layout [data-bw-section-type] {
    grid-column: content-start / content-end;
}

.bw-page-layout [data-bw-section-type][data-bw-width-resolved="full_bleed"] {
    grid-column: full-start / full-end;
}

@media (min-width: 640px) {
    .bw-page-layout {
        --bw-page-inline-gutter: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .bw-page-layout {
        --bw-page-inline-gutter: 2rem;
    }
}

@media (max-width: 1279px) {
    .bw-page-layout {
        display: block;
    }

    .bw-page-layout.has-left-sidebar,
    .bw-page-layout.has-right-sidebar,
    .bw-page-layout.has-left-sidebar.has-right-sidebar {
        --bw-page-bg-bleed-shift: 0px;
    }

    .bw-page-layout__content {
        display: block;
    }

    .bw-page-layout__sidebar {
        display: none;
    }
}

.bw-page > .bw-page-hero {
    margin-block-end: 0;
}

.bw-page__after-hero {
    display: block;
}

.bw-page__after-hero-surface {
    --bw-page-inline-gutter: 1rem;
    background-color: var(--bw-page-after-hero-bg-color, transparent);
    color: var(--bw-page-after-hero-copy-color, currentColor);
    padding-block-start: calc(var(--bw-space-section-y-bottom, var(--bw-space-section-y, 0)) * .5);
}

@media (min-width: 640px) {
    .bw-page__after-hero-surface {
        --bw-page-inline-gutter: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .bw-page__after-hero-surface {
        --bw-page-inline-gutter: 2rem;
    }
}