* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

.container {
    display: grid;
    height: 800px;

    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 50px auto 50px;

    grid-template-areas:
        "header header header header header header header header header header header header"
        "left left main main main main main main main main right right"
        "footer footer footer footer footer footer footer footer footer footer footer footer";
}

header {
    grid-area: header;
    background-color: lightblue;
}

.left {
    grid-area: left;
    background-color: lightcoral;
}

main {
    grid-area: main;
    background-color: lightgreen;
}

.right {
    grid-area: right;
    background-color: lightyellow;
}

footer {
    grid-area: footer;
    background-color: lightgray;
}

/* Media Query */
@media screen and (max-width: 800px) {

    .container {
        height: 600px;

        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: 50px auto auto 50px;

        grid-template-areas:
            "header header header header header header header header header header header header"
            "left left left main main main main main main main main main"
            "right right right right right right right right right right right right"
            "footer footer footer footer footer footer footer footer footer footer footer footer";
    }

}