/*  PAGE: DEFAULT with sidebar
//////////////////////////////////////////////////////////////////////////////*/

@layer layout {
    @media (max-width: 980px) {
        .page-sidebar {
        }
        .page--sidebar .section--main:has(.area--hero) .area--main {
            grid-row: 3;
        }
        .page--sidebar .section--main:has(.area--hero) .area--sidebar {
            grid-row: 2;
        }
        .page--sidebar .section--main:has(.area--hero) .area--bottom {
            grid-row: 4;
        }
    }
    @media (min-width: 980px) {
        .page--sidebar .area--sidebar {
            grid-column: 2/5 !important;
        }
        .page--sidebar .section--main .area--main {
        }
        .page--sidebar .section--main:has(.area--hero) .area--main,
        .page--sidebar .section--main:has(.area--hero) .area--sidebar {
            grid-row: 2;
        }

        .page--sidebar .area--main {
            grid-column: 5/12;
            grid-template-columns: repeat(7, var(--size-column));
            gap: var(--size-gap);
        }
        .page--sidebar .area--main > * {
            grid-template-columns: 100%;
        }
        .page--sidebar .area--main > .component {
            grid-column: span 6;
        }
        .page--sidebar .area--main > .component > * {
            grid-column: 1/-1;
        }
        .page--sidebar .area--sidebar {
            grid-column: 2/6;
            grid-template-columns: 1fr;
        }
        .page--sidebar .area--sidebar > :last-child,
        .page--sidebar .area--main > :last-child {
            padding-bottom: var(--spacing-m);
        }

        .page--sidebar .area--bottom {
            grid-column: 2 /-2;
            display: grid;
            grid-template-columns: repeat(12, var(--size-column));
            column-gap: var(--size-gap);
        }
        .page--sidebar .area--bottom > * {
            grid-column: 1/-1;
        }
    }
}