/*  LAYOUT: MAP 
//////////////////////////////////////////////////////////////////////////////*/

@layer layout {
    @media (max-width: 640px) {
        .page--map .area--main,
        .page--map .area--sidebar {
            padding: var(--spacing-m);
        }
    }
    @media (min-width: 640px) and (max-width: 980px) {
        .page--map .area--main,
        .page--map .area--sidebar {
            padding: var(--spacing-m);
        }
    }
    @media (min-width: 980px) {
        .page--map {
        }
        .page--map .section--main .area--main {
            grid-column: 6 / -2;
            grid-row: 2;
            grid-template-columns: repeat(8, var(--size-column));
        }
        .page--map .section--main .area--sidebar {
            grid-column: 2 / 6;
            grid-row: 2;
        }
        .page--map .section--main .area--main > * {
            grid-column: 1 / -1;
            grid-template-columns: repeat(8, var(--size-column));
        }
        .page--map .section--main .area--main > .component > * {
            grid-column: 1 / -1;
        }
        .page--map .area--hero .nav-sub {
            grid-row: 2;
            grid-column: 2 / -2;
        }

        .page--map .area--hero .nav-sub--umland {
            grid-row: 3;
        }

        .page--map .component--nav-sub {
            position: absolute !important;
            bottom: 0;
            width: 100%;
        }
        .page--map .area--bottom {
            grid-column: 1 /-1;
            display: grid;
            grid-template-columns: 1fr repeat(12, var(--size-column)) 1fr;
            column-gap: var(--size-gap);
        }

        .page--map .map {
            grid-column: 1 /-1;

            display: grid;
            grid-template-columns: 1fr repeat(12, var(--size-column)) 1fr;
            column-gap: var(--size-gap);
        }
        .page--map .map #map {
            grid-column: 1 /-1;
            grid-row: 1;
        }
        .page--map .map .component--legend {
            grid-column: 1;
            grid-row: 1;
            place-self: end;
        }
        .page--map .component--backlink {
            position: absolute;
            top: calc(var(--spacing-xs) + var(--spacing-m));
            grid-row: 1;
        }
    }
}