.container {
    display: grid;
    height : 100vh;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 2fr 0.6fr ;
    grid-template-areas: 
    "sidebar main main main"
    "footer footer footer footer";
    grid-gap: 0.2rem;
    font-weight: 800;
    box-sizing: border-box;
}

@media only screen and (max-width:550px){
    .container {
        grid-template-columns: 1fr;
        grid-template-rows: 0.8fr 0.8fr 1.2fr 1fr;
        grid-template-areas: 

        "sidebar"
        "main"
        "footer";
    }
}