#container {
    display: grid;
    grid-template-areas:
        "header header header"
        "content1 content2 content2"
        "content1 content2 content2"
        "content3 content3 content3"
        "content4 content5 content6"
        "content7 content7 content7"
        "footer footer footer";
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr 300px 300px 200px 1fr 1fr 1fr;
    gap: 5px;
}

ul {
    list-style: none;
    display: flex;
    font-size: 20px;
    justify-content: flex-end;
    gap: 12px;
}

a {
    text-decoration: none;
    color: black;
}

img {
    display: block;
    margin: auto;
    width: 100px;
    height: 100px;
}

header {
    grid-area: header;
    display: flex;
    background-color: cyan;
}

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

.content2 {
    grid-area: content2;
    background-color: lightblue;
}

.content2 img {
    width: 100%;
    height: 100%;
}

.content3 {
    grid-area: content3;
    background-color: orange;
}

.content3 img {
    width: 100%;
    height: 100%;
}

.content4 {
    grid-area: content4;
    background-color: plum;
    text-align: center;
}

.content5 {
    grid-area: content5;
    background-color: yellow;
    text-align: center;
}

.content6 {
    grid-area: content6;
    background-color: #ff6060;
    text-align: center;
}

.content7 {
    grid-area: content7;
    background-color: skyblue;
    text-align: center;
}

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

#hamburger {
    display: none;
}

@media screen and (max-width: 599px) {
    nav {
        display: none;
        flex-direction: column;
    }

    #hamburger {
        display: inline;
        width: 50px;
        height: 50px;
        position: fixed;
        right: 0;
        top: 0;
    }

    #container {
        grid-template-areas:
            "header header"
            "content1 content2"
            "content3 content2"
            "content4 content5"
            "content6 content7"
            "footer footer";
            grid-template-columns: 1fr 1fr;
            grid-template-rows: repeat(6, 1fr);
    }
}

@media screen and (min-width: 600px) and (max-width: 1199px) {
    #container {
        grid-template-areas:
            "header header header"
            "content1 content1 content2"
            "content3 content3 content2"
            "content4 content5 content5"
            "content6 content7 content7"
            "footer footer footer";
        grid-template-rows: repeat(6, 1fr);
    }
}

@media screen and (min-width: 1200px) {
    #container {
        grid-template-areas:
            "header header header header"
            "content1 content1 content2 content3"
            "content1 content1 content2 content3"
            "content4 content5 content6 content6"
            "content7 content7 content6 content6"
            "content7 content7 content6 content6"
            "footer footer footer footer";
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 1fr 1fr 1fr 400px 50px 1fr 1fr;
    }

    .content6 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    footer {
        font-size: 50px;
    }
}