style.css

nav {
    font-family: 'DejaVu Sans', sans-serif;
    line-height: 4em;
    font-weight: bold;
    padding: 1em;
    margin: 1em;
    border: 2px dotted black;
    border-radius: 6px;
    background-color: lightyellow;
}

article {
    font-family: 'Cinzel Decorative', cursive;
    padding: 2em;
    margin: 1em;
    border: 2px solid black;
    border-radius: 6px;
    background-color: azure;
}

footer {
    padding: 2em;
    margin: 2em 1em 1em 1em;
    border: 2px solid black;
    border-radius: 6px;
    background-color: gainsboro;
}

.page-title {
    font-family: 'Cinzel', serif;
    text-align: center;
}

.chapter-title {
    font-family: 'Cinzel', serif;
}
/* CSS grid is inactive before display width of 420px */
@media (min-width: 420px) {
    .page {
        display: grid;
        grid-gap: 1em;
        /* the nav is a third of the 1st article */
        grid-template-columns: 1fr 2fr;
        /* rows are minimum 50px and grow with content */
        grid-auto-rows: minmax(50px, auto);
    }
    /* the header reaches from the first to the last line */
    header {
        grid-column: 1/-1;
    }
    /* the nav reaches from under the title to the last article
        and has to be resized with different number of elements per row */
    nav {
        grid-row: 2 / 8;
        padding: 2em 0.2em 0.2em 1em;
    }
    /* the footer reaches from the first to the last line */
    footer {
        grid-column: 1/-1;
    }

    .chapter-title {
        grid-column-start: 2;
        margin-left: 3em;
    }
}

@media (min-width: 800px) {
    .page {
        /* nav + article + article */
        grid-template-columns: 1fr 2fr 2fr;
    }

    nav {
        /* because we use more columns, we have less rows  */
        grid-row: 2 / 6;
    }
}


@media (min-width: 1140px) {
    .page {
        /* nav + article + article + article */
        grid-template-columns: 1fr 2fr 2fr 2fr;
    }

    nav {
        /* because we use more columns, we have less rows  */
        grid-row: 2 / 5;
    }
}