header {
    grid-area: header;
    background-color: lightblue;
    padding: 0 2ch;
}

.middle {
    grid-area: middle;
}

nav {
    grid-area: nav;
    background-color: lightgreen;
}

main {
    grid-area: main;
    /* background-color: lightgray; */
}

footer {
    grid-area: footer;
    background-color: lightcoral;
    padding: 0 2ch;
}

.grid-container {
    display: grid;
    gap: .5em;

    grid-template:
        "header"
        "middle"
        "footer";
}

.middle {
    width: 100%;
    display: grid;

    grid-template-columns: [before] minmax(125px, 1fr) [seam] repeat(auto-fit, 12em) [after];

    /* grid-template:
        "nav main"
        / minmax(200px, 100%) 1fr; */

    /* grid-template-rows: subgrid; */

    gap: inherit;
}

nav {
    /* grid-area: nav; */
    grid-column: before / seam;

    /* width: fit-content; */
}

main {
    /* grid-area: main; */
    grid-column: seam / after;


    /* padding: 1em; */

    display: grid;

    /* width: auto; */
    gap: inherit;

    /* grid-template-columns: repeat(auto-fit, 12em); */
    /* grid-auto-rows: auto; */
    /* grid-auto-flow: column; */
    /* grid-auto-flow: column; */
    grid-template-columns: subgrid;
    /* grid-template-rows: subgrid; */
}

:root {
    --inner-radius: .5em;
    --outer-radius: .5em;
}

main img {
    /* background-image: url("https://picsum.photos/1600/1200?random="); */
    /* margin: .25em !important; */
    border-radius: var(--inner-radius);
    width: 12em;
    aspect-ratio: 4 / 3;
}

header,
nav,
footer {
    border-radius: var(--outer-radius) var(--inner-radius) var(--inner-radius) var(--outer-radius);
}