@media (max-width: 774px) {
    html {
        --article-width: 550px;
        --aside-width: calc(100vw - 20px);
    }

    @media (max-width: 550px) {
        html {
            --article-width: calc(100vw - 20px);
        }
    }

    body {
        margin: 0px;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: min-content auto;
        grid-template-areas:
            "aside"
            "main";
        grid-column-gap: 0px;
        height: 100vh;
        overflow: hidden;
    }

    main {
        padding: 10px 10px 100px 10px;
    }

    aside {
        padding: 10px;
    }

    #navigation {
        display: grid;
        gap: 12.5px;
        grid-template-columns: min-content 1fr;
    }

    #navigation a {
        width: 170px;
    }

    #navigation ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        max-width: 185px;
    }

    #showcase {
        display: none;
    }

    .post__body__content pre {
        max-width: calc(var(--article-width)) !important;
    }
}