#intro {
    grid-area : intro;
    border :rgb(122, 255, 239) solid;
    
    border-radius:var(--main-radius);
    
}
.container {
    display: grid;
    height : 100vh;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 0.2fr 2fr 0.6fr ;
    grid-template-areas: 
    "nav nav nav nav"
    "intro intro intro intro"
    "main 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 1.2fr 1fr;
        grid-template-areas: 

        "intro"
        "main"
        "footer"
    }
}