body {
    background-color: #222831;
}

#container {
    display: grid;
    grid-template-areas: 
        "header header header"
        "content1 content2 content3"
        "content4 content5 content3"
        "content6 content6 content7"
        "footer footer footer";
    grid-auto-rows: 120px;
    gap: 8px;
}

.header {
    display: flex;
    flex-direction: row;
    flex-flow: reverse;
    align-items: center;
    
    grid-area: header;
    background-color: lightblue;
}

.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;
}

.content2 {
    display: flex;
    justify-content: center;
    align-items: center;
    
    grid-area: content2;
    background-color: lightcoral;
}

.content3 {
    display: flex;
    justify-content: center;
    align-items: center;

    grid-area: content3;
    background-color: lightgoldenrodyellow;
}

.content4 {
    display: flex;
    justify-content: center;
    align-items: center;
    
    grid-area: content4;
    background-color: lightpink;
}

.content5 {
    display: flex;
    justify-content: center;
    align-items: center;
    
    grid-area: content5;
    background-color: lightseagreen;
}

.content6 {
    display: flex;
    justify-content: center;
    align-items: center;
    
    grid-area: content6;
    background-color: lightgray;
}

.content7 {
    display: flex;
    justify-content: center;
    align-items: center;
    
    grid-area: content7;
    background-color: lightcyan;
}

.footer {
    display: flex;
    justify-content: center;
    align-items: center;
    
    grid-area: footer;
    background-color: lightsteelblue;
}

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

    .nav {
        margin-left: 40%;
        width: 100%;
    }
}