/*  LAYOUT: TABLET
//////////////////////////////////////////////////////////////////////////////*/

@layer layout {
    @media (min-width: 720px) and (max-width: 1220px) {
        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;
        }
        .section--header .component--branding {
            grid-column: 1;
            grid-row: 1;
            padding: var(--spacing-m) var(--spacing-m);
        }
        .section--header .component--nav-top {
            grid-row: 2;
            padding: var(--spacing-s) var(--spacing-m);
        }
        .section--header .component--nav-main {
            grid-row: 3;
            padding: var(--spacing-s) var(--spacing-m);
        }
        .section--header .component--nav-cta {
            padding: var(--spacing-s) var(--spacing-m);
        }
        .section--header .component--language-switcher {
            grid-column: 1;
            grid-row: 1;
            padding: var(--spacing-m) var(--spacing-m);
            place-self: start end;
        }
        .section--header .component--nav-mobile {
            display: none !important;
        }

        /*  SECTION MAIN /////////////////////////////////////////////////////*/
        .section--main .area {
            padding: var(--spacing-m);
            height: min-content;
        }
        .section--main .area--page-title {
            grid-row: 1;
        }
        .section--main .area--content {
            grid-row: 2;
        }
        .section--main .area--sidebar {
            grid-row: 3;
        }

        .section--main > .grid > * {
            padding: var(--spacing-m);
            height: min-content;
        }
        .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);
        }
    }
}