/* Layout */
body {
    display: grid;
}
.highlight {
    overflow-wrap: normal;
}

@media (max-width: 1120px /* 640px + 400px + 4*20px */) {
    body {
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            "header"
            "main"
            "footer"
        ;
    }
    header {
        grid-area: header;
    }
    main {
        grid-area: main;
    }
    footer {
        grid-area: footer;
    }
    img, .highlight {
        max-width: 94vw;  /* accounts for margins*/
    }
}

@media (min-width: 1120px) {
    body {
        height: 100vh;
        grid-template-columns: 400px auto;
        grid-template-rows: 1fr auto;
        grid-template-areas:
            "header main"
            "footer main"
        ;
    }
    header {
        grid-area: header;
    }
    main {
        grid-area: main;
        overflow: auto;
    }
    main section {
        min-width: 640px;
        max-width: 1120px;
    }
    img {
        max-width: 100%;
    }
    footer {
        grid-area: footer;
    }
}