main {
    display: grid;
    grid-template-areas:
        "header header header header"
        "hero hero hero hero"
        "para1 para2 para3 para4"
        "footer footer footer footer";
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto 3fr auto;
    border: 5px solid black;
}

h1 {
    grid-area: header;
    text-align: center;
    grid-column: span 4;
    border-bottom: 3px solid black;
    font-family: "Roboto", sans-serif;
}

img {
    grid-area: hero;
    width: 100%;
    grid-column: span 4;
    border-bottom: 3px solid black;
    border-right: 3px solid black;
}

p {
    font-family: "Bitcount Prop Single Ink", sans-serif;
    grid-row: span 3;
    border: 3px solid black;
    border-left: none;
}

p.one {
    grid-area: para1;
}

p.two {
    grid-area: para2;
}

p.three {
    grid-area: para3;
}

p.four {
    grid-area: para4;
}

footer {
    font-family: "Bitcount", sans-serif;
    grid-area: footer;
    text-align: center;
    grid-column: span 4;
}