.one {
    grid-area: one;
    background-color: powderblue;
}
.two {
    grid-area: two;
    background-color: cadetblue;
}
.three {
    grid-area: three;
    background-color: skyblue;
}
.four {
    grid-area: four;
    background-color: lightblue;
}

main{
    display:grid; 
    width: 100%;
    height: 550px;
    grid-template-areas: 
        "one one one one"
        "two two three three"
        "four four four four"
}

nav {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr 1fr 1fr;
    justify-items: end;
    align-items: baseline;
    grid-column-gap: 10px; 
    grid-row-gap: 20px;
    font-family: monospace;
}
h1{
    justify-self: start;
}
@media(min-width:1px) and (max-width:785px){
    nav{
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
        grid-row-gap: 20px;
        margin-bottom: 30px;
    }
}