#container {
display: grid;
grid-template-areas:
"header header header"
"content1 content2 content2"
"content1 content3 content4"
"content5 content5 content6"
"content5 content5 content7";
grid-auto-rows: 120px;
gap: 8px;
}
.header {
display: flex;
flex-direction: row;
flex-flow: reverse;
align-items: center;
grid-area: header;
background-color: lightblue;
}


.header h1 {
text-align: center;
margin: 0;
padding-left: 30px;
}

.nav {
margin-left: 60%;
width: 40%;
display: flex;
justify-content: space-between;
background-color: lightyellow;
padding: 10px;
margin-top: 5px;
}
.content1 {
display: flex;
justify-content: center;
align-items: center;
grid-area: content1;
background-color: lightgreen;
}

.nav p {
margin: 0 10px;
background-color:lightgreen;
}
.content2 {
grid-area: content2;
background-color: lightcoral;
}
.content3 {
grid-area: content3;
background-color: lightgoldenrodyellow;
 img {
    height: 67%;
    width: 100%;
    object-fit: stretch;
    }
}
.content4 {
grid-area: content4;
background-color: lightpink;
img {
    height: 100%;
    width: 100%;
    object-fit: stretch;
    }
}
.content5 {
grid-area: content5;
background-color: rgb(0, 103, 98);
 img {
    height: 100%;
    width: 100%;
    object-fit: stretch;
    }
}
.content6 {
grid-area: content6;
background-color: blueviolet;
    img {
    height: 100%;
    width: 100%;
    object-fit: stretch;
    }
}

.content7 {
grid-area: content7;
background-color: rgb(165, 160, 254);
img {
    height: 100%;
    width: 100%;
    object-fit: stretch;
    }
}

@media (max-width: 768px) {
    #container {
        grid-template-areas:
         "header header header"
        "content1 content2 content2"
        "content1 content3 content4"
        "content5 content5 content6"
        "content5 content5 content7";
    }


}