.container {
    padding-top : 50px;
    display : grid;
    height : 100vh;
    grid-template-columns: 0.5fr 1fr 1fr;
    grid-template-rows: 1.5fr 1.5fr 0.5fr;
    grid-template-areas: 
    "sidebar main main"
    "sidebar content1 content2"
    "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.4fr 2.2fr 1.2fr 1.2fr 1.2fr 1fr;
        grid-template-areas: 
        "sidebar"
        "main"
        "content1"
        "content2"
        "footer"
    }
}