html {
    box-sizing: border-box;
}
*,
*:before,
*:after {
    box-sizing: inherit;
}

.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}

main {
    /*background-image: url("../img/grid.png");
    background-size: contain;*/
    width: 90vw;
    margin: 20px auto;
    border: 1px solid #000;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    gap: 20px;
    padding: 20px;
}

header.primary {
    background: rgba(0, 0, 0, 0.1);
    grid-column-start: 1;
    grid-column-end: 13;
    grid-row-start: 1;
    grid-row-end: 2;
}

#content {
    grid-column-start: 1;
    grid-column-end: 13;
    grid-row-start: 2;
    grid-row-end: 3;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
}

#blog {
    background: rgba(0, 0, 0, 0.1);
    grid-column-start: 1;
    grid-column-end: 9;
    grid-row-start: 1;
    grid-row-end: 2;
}

#secondary {
    background: rgba(0, 0, 0, 0.1);
    grid-column-start: 9;
    grid-column-end: 13;
    grid-row-start: 1;
    grid-row-end: 2;
}

footer.primary {
    background: rgba(0, 0, 0, 0.1);
    grid-column-start: 1;
    grid-column-end: 13;
    grid-row-start: 3;
    grid-row-end: 4;
}