@layer components {

    .panel-page {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(340px, 460px);
        gap: var(--s-7) clamp(40px, 7vw, 120px);
        align-items: start;
        max-width: 1280px;
        margin-inline: auto;
        padding: var(--s-8) var(--gutter) 0;
    }

    .panel-page__panel {
        position: sticky;
        top: calc(var(--h-header-slim) + var(--s-5));
        display: grid;
        gap: var(--s-5);
        padding: var(--s-6);
        border: 1px solid var(--c-line);
        border-radius: var(--r-1);
        background: var(--c-surface);
    }

    .panel-page__body .callouts {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        margin-top: var(--s-7);
    }

    @media (max-width: 899px) {
        .panel-page {
            grid-template-columns: minmax(0, 1fr);
            padding-top: var(--s-6);
        }

        .panel-page__panel {
            position: static;
            order: -1;
            padding: var(--s-5);
        }
    }

    @media (min-width: 900px) {
        .panel-page__panel {
            max-height: calc(100vh - var(--h-header-slim) - var(--s-7));
            overflow-y: auto;
            overscroll-behavior: contain;
        }
    }

    .panel-page__result {
        display: grid;
        gap: var(--s-4);
        justify-items: start;
    }

    .panel-page__result > .order,
    .panel-page__result > .notice {
        justify-self: stretch;
    }

    .panel-page__result:focus {
        outline: none;
    }

    .panel-page__panel > * {
        min-width: 0;
    }

}