~/

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

html,
body {
    height: 100%;
}

body {
    display: grid;
    grid-template-rows: min-content;
}

.section {
    display: grid;
    grid-template-columns: repeat(15, 5rem) 1fr;
}

/*  HEADER ///////////////////////////////////////////////////////////////////*/

.section--header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    grid-template-rows: 2rem 1rem 2rem 2rem 2rem;
    z-index: 3;
    .module--branding {
        grid-column: 1 / 4;
        grid-row: 1 / 6;
    }
    .module--nav-main {
        grid-column: 5/ -2;
        grid-row: 3;
        padding-right: var(--l);
    }
    .module--widgets-topbar {
        grid-column: 4 / -1;
        grid-row: 1;
        padding-left: var(--col);
    }
    .module--widgets-topright {
        grid-column: 16/ -1;
        grid-row: 3;
        padding-inline: var(--l) var(--m);
    }
}

/*  MAIN /////////////////////////////////////////////////////////////////////*/

.section--main {
    position: relative;
    z-index: 1;
    width: 100%;
    align-items: start;
    overflow: hidden;
    .area--content {
        grid-row: 1;
        margin-top: 9rem;
    }
    .area--content {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: subgrid;

        .article {
            display: grid;
            grid-template-columns: subgrid;
            grid-template-rows: min-content;
            grid-column: 1 / -1;
        }
        .post-navigation {
            grid-column: 5 / -2;
            padding-block: var(--m);
        }
        .entry-content,
        .entry-header {
            display: grid;
            grid-template-columns: subgrid;
            grid-column: 1 / -1;
            > * {
                grid-column: 5 / -6;
            }
            > .alignfull {
                grid-column: 1 /-1;
            }
            > .alignwide {
                grid-column: 5 /-2;
            }
        }
        .entry-header {
            grid-column: 1 / -2;
            grid-row: 1;
        }
        .entry-content {
            padding-block: var(--l);
            grid-row: 2;
            > * {
                margin-bottom: var(--m);
            }
            > *.module--cta:last-of-type {
                margin-bottom: calc(var(--l) * -1);
            }
        }
        .post-thumbnail {
            grid-row: 2;
            grid-column: 1/4;
            z-index: 1;
        }
    }
    .area--sidebar {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: subgrid;
        > * {
            grid-column: 5/-2;
        }
        padding-top: var(--l);
    }
}

/*  FOOTER ///////////////////////////////////////////////////////////////////*/

.section--footer {
    padding-block: var(--l);
    display: grid;
    place-items: start;
    grid-template-rows: min-content;
    row-gap: 1rem;

    > .module--nav-footer {
        grid-column: 5 / -5;
        grid-row: 1;
    }
    > .module--widgets {
        grid-column: 5 / -5;
        grid-row: 2;
    }
}