.container {
    width: 100%;

    /*
    We're using dvh, which is a newish feature that excludes the size of mobile
    added menus. If we don't use this and instead use 100vh, we have to scroll
    before we see some elements at the bottom of the page.
    */
    height: calc(100vh - var(--nav-bar-height));
    height: calc(100dvh - var(--nav-bar-height));

    display: flex;

    background-color: var(--black-15);
}

@media(min-width: 40em) {
    .container {
        border-radius: 1em 0 0 0;
    }
}