/*  LAYOUT: MOBILE
//////////////////////////////////////////////////////////////////////////////*/

@layer layout {
    @media (max-width: 720px) {
        body {
            display: grid;
            grid-template-rows: min-content 1fr min-content;
            overflow-x: hidden;
        }

        .section {
            display: grid;
            grid-template-columns: 100%;
            grid-template-rows: min-content min-content 1fr;
            gap: var(--size-grid-gap);
        }

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

        .section--header {
            gap: 0;
            grid-template-columns: 165px 1fr min-content;
        }
        .section--header .component--branding {
            grid-column: 1;
            grid-row: 2;
            padding: var(--spacing-m) var(--spacing-m);
        }
        .section--header .component--nav-top {
            display: none;
        }
        .section--header .component--nav-cta {
            padding: var(--spacing-m) var(--spacing-m);
            grid-row: 1;
            grid-column: 1/3;
            place-self: stretch;
            display: grid;
            place-items: start;
            z-index: 9;
        }
        .section--header .component--nav-main {
            display: none;
        }
        .section--header .component--language-switcher {
            grid-column: 3;
            grid-row: 2;
            padding: var(--spacing-m) var(--spacing-m);
            place-self: start end;
        }
        .section--header .component--nav-mobile {
            grid-column: 1/-1;
            grid-row: 1;
            place-self: stretch;
            padding: var(--spacing-m) var(--spacing-m);
        }

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

        .section--main > .grid > * {
            padding: var(--spacing-m);
            height: min-content;
        }
        .section--main > .grid {
            display: flex;
            flex-direction: column;
        }
        .section--main .sidebar {
            order: 2;
        }
        .section--main .hentry {
            order: 3;
        }
        .grid > .hentry > .article__body {
            display: grid;
            grid-template-columns: 100%;
            grid-template-rows: min-content;
            row-gap: 1.25rem;
        }

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

        .section--footer > .component {
            padding: var(--spacing-m);
        }
        .section--footer > .component--meta {
            order: 99;
        }
    }
    /* @media (max-width: 500px) {
        .section--header .component--language-switcher {
            grid-column: 1;
            grid-row: 2;
            place-self: start;
            z-index: 5;
        }
    } */
}