/*  LAYOUT: DESKTOP 
//////////////////////////////////////////////////////////////////////////////*/

@layer layout {
    @media (min-width: 1220px) {
        body {
            display: grid;
            grid-template-rows: min-content 1fr min-content;
            overflow-x: hidden;
        }
        .section {
            display: grid;
            grid-template-columns: 1fr 75.5rem 1fr;
            column-gap: 2.5rem;
            grid-template-rows: min-content;
        }

        /*  SECTION HEADER ///////////////////////////////////////////////////*/

        .section--header {
            grid-template-columns: 1fr 18rem 55rem 1fr;
            grid-template-rows: 3.75rem 3.75rem;
            column-gap: 2.5rem;
        }

        .section--header .component--branding {
            grid-column: 2;
            grid-row: 1 / 3;
            display: grid;
            place-items: end start;
        }
        .section--header .component--nav-top {
            grid-column: 3 / -1;
            grid-row: 1;
            place-self: stretch stretch;
            display: grid;
            place-items: center stretch;
            margin-left: -2.5rem;
            padding-left: 2.5rem;
            height: 100%;
        }
        .section--header .component--nav-cta {
            grid-column: 3/-1;
            grid-row: 1;
            place-self: center end;
            padding-inline: var(--spacing-s);
        }
        .section--header .component--nav-main {
            grid-column: 3 /-1;
            grid-row: 2;
            place-self: stretch stretch;
            display: grid;
            place-items: center stretch;
            margin-left: -2.5rem;
            padding-left: 2.5rem;
        }
        .section--header .component--language-switcher {
            grid-column: 3/-1;
            grid-row: 2;
            place-self: stretch end;
            display: grid;
            place-items: center;
            padding-inline: var(--spacing-s);
        }

        .section--header .component--nav-mobile {
            display: none !important;
        }

        /*  SECTION MAIN /////////////////////////////////////////////////////*/

        .section--main {
            grid-row: 2;
            padding-bottom: var(--spacing-l);
        }

        .section--main .component--nav-sub {
            position: sticky;
            top: 12.5rem;
        }

        .grid {
            grid-column: 2 / -2;
            display: grid;
            grid-template-columns: 18rem repeat(5, 9rem);
            gap: 2.5rem;
        }

        .grid > * {
            grid-column: 2/-1;
        }

        .grid > .component--page-title {
            grid-column: 2 / -2;
            grid-row: 1;
        }
        .grid > .hentry {
            grid-column: 2 / -1;
            grid-row: 2;
            grid-row: auto;
            display: grid;
            grid-template-columns: 100%;
            grid-template-rows: min-content;
            gap: 1.25rem;
        }
        .tax-tax_thema .grid > .hentry {
            grid-row: auto;
        }
        .grid > .sidebar {
            grid-column: 1;
            grid-row: 2;
            padding-right: 2.5rem;
        }

        .grid > .hentry > .article__body {
            display: grid;
            grid-template-columns: 1fr 9rem;
            grid-template-rows: min-content;
            column-gap: 2.5rem;
            row-gap: 1.5rem;
        }
        .grid > .hentry > .article__body > * {
            grid-column: 1 / -2;
        }
        .grid > .hentry > .article__body > .alignwide,
        .grid > .hentry > .article__body > .alignfull {
            grid-column: 1 / -1;
        }

        /* FRONTPAGE */

        .home .component--tagline {
            spadding-left: 18rem;
        }
        .home .grid > .hentry {
            grid-row: 1;
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: 100%;
        }
        .home .grid > .hentry > .article__body {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: 18rem repeat(5, 9rem);
        }
        .home .grid > .hentry > .article__body > * {
            grid-column: 2 / -2;
        }
        .home .grid > .hentry > .article__body > .alignwide {
            grid-column: 2 / -1;
        }
        .home .grid > .hentry > .article__body > .alignfull {
            grid-column: 1 / -1;
        }

        /* SEARCHPAGE */

        .search .grid > .hentry {
            grid-row: auto;
        }

        /*  SECTION FOOTER ///////////////////////////////////////////////////*/

        .section--footer {
            grid-row: 3;
            grid-template-columns: 1fr 18rem 9rem 9rem 9rem 9rem 9rem 1fr;
            grid-template-rows: 1fr min-content min-content;

            column-gap: 2.5rem;
            row-gap: 2.5rem;
        }
        .section--footer .component--cta-1 {
            grid-column: 3 /5;
            grid-row: 2;
            padding-top: 2.5rem;
        }
        .section--footer .component--cta-2 {
            grid-column: 5 /8;
            grid-row: 2;
            padding-top: 2.5rem;
        }
        .section--footer .component--meta {
            grid-column: 1/3;
            grid-row: 1/4;
            padding-inline: 2.5rem;
            padding-block: 2.5rem;
            place-self: stretch stretch;
            display: grid;
            place-items: end start;
        }
        .section--footer .component--nav-footer {
            grid-column: 3;
            grid-row: 3;
            padding-bottom: 2.5rem;
        }
        .section--footer .component--nav-footer--2 {
            grid-column: 4/6;
            grid-row: 3;
            padding-bottom: 2.5rem;
        }
        .section--footer .component--searchform {
            grid-column: 6/-1;
            grid-row: 3;
            place-self: end end;
            padding-right: 2.5rem;
            padding-bottom: 2.5rem;
        }
    }
}