html {
    padding: 1em;
    min-height: 100vh;
    height: 100%;
}

body {
    width: 100%;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 1em;
    margin: 0;
    height: 100%;
}

body > * {
    background: var(--primary-4);
    padding: 1rem;
}

@media (min-width: 40em) {
    body {
        grid-template-columns: 12em 1fr;
        grid-template-rows: auto 1fr auto;
    }

    header {
        grid-column: span 2;
    }

    nav {
        grid-row: span 2;
    }
}