:root {
    --main-radius:5px;
    --main-padding:5px;
}

@media only screen and (max-width:550px) {
    .container {
        grid-template-columns: 1fr;
        grid-template-rows: 0.4fr 0.4fr 2.2fr 1.2fr 1.2fr 1.2fr 1fr;
        grid-template-areas: 
            "nav"
            "sidebar"
            "main"
            "content1"
            "content2"
            "content3"
            "footer";
    }
}