:root {
    --dt-sidebar-width: 120px;

    --dt-banner-height: 80px;
    --dt-nav-height: 150px;
    --dt-footer-height: 4rem;

    --mb-banner-height: var(--dt-banner-height);
    --mb-nav-height: 2rem;
    --mb-footer-height: var(--dt-footer-height);
}

body {
    margin: 0;
}

#site {
    display: grid;
    max-width: 90vw;
    margin: 0 auto;
    padding-top: 10px;
    #banner {
        grid-area: banner;
    }
    #navigation {
        grid-area: navigation;
    }
    #footer {
        grid-area: footer;
    }
    #content {
        grid-area: content;
    }
}

/* mobile */
@media (max-width: 650px) {
    #site {
        grid-template-rows: var(--mb-banner-height) var(
                --mb-nav-height
            ) auto var(--mb-footer-height);
        grid-template-columns: 100%;
        grid-template-areas: "banner" "navigation" "content" "footer";
    }

    .sidebar {
        position: relative;
    }
}

/* desktop */
@media (min-width: 650px) {
    #site {
        width: 820px;
        grid-template-rows: var(--dt-banner-height) var(--dt-nav-height) var(
                --dt-footer-height
            ) 1fr;
        grid-template-columns: var(--dt-sidebar-width) calc(
                100% - var(--dt-sidebar-width)
            );
        grid-template-areas: "banner content" "navigation content" "footer content" "overflow content";
    }

    .sidebar {
        position: sticky;
        height: 100%;
        width: var(--dt-sidebar-width);
    }
    #banner {
        top: 0px;
    }
    #navigation {
        top: var(--dt-banner-height);
    }
    #footer {
        top: calc(var(--dt-banner-height) + var(--dt-nav-height));
    }
}