
@media screen and (min-width: 960px)
{
    #page-container
    {
        display: grid;
        grid-template-columns: 5% 1fr fit-content(25%) 5%;
    }

    #page-container > #site-topbar
    {
        grid-column: 1/-1;
    }

    #page-container > header
    {
        grid-column: 1/-1;
    }

    #page-container > main
    {
        grid-column: 2/3;
    }

    #page-container > main > .container
    {
        width: auto;
    }

    #page-container > #site-sidebar
    {
        grid-column: 3/4;
    }

    #page-container > #site-sidebar > .container
    {
        width: auto;
    }

    #page-container > footer
    {
        grid-column: 1/-1;
    }

    .index .blog-post .post-feature,
    .archive .blog-post .post-feature
    {
        float: left;
        margin-right: 1em;
    }

    .index .blog-post,
    .archive .blog-post
    {
        overflow: auto;
    }
}

@media screen and (min-width: 1280px)
{
    #page-container
    {
        grid-template-columns: 15% 1fr fit-content(20%) 15%;
    }
}

@media screen and (min-width: 1920px)
{
    #page-container > #site-topbar > .container,
    #page-container > header > .container,
    #page-container > footer > .container
    {
        width: 70%;
    }
}
