body{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin: 0;
}

@media(min-width:801px){
.grid{
    padding:1%;
    display: grid;
    grid-template-columns: repeat(4,25%);
    grid-template-rows: 10vh 10vh 35vh 35vh 10vh;
    grid-template-areas: 
    "hd hd hd hd" 
    "nv nv nv nv"
    "hr hr ca sb"
    "hr hr cb sb"
    "ft ft ft ft"
    ;
}
}

.imp{
    color:black;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cell{
  color:aqua;
  display: flex;
  justify-content: center;
  align-items: center;
}

.head{
    background-color:red;
    grid-area: hd;
}
.nav{
    background-color:orange;
    grid-area: nv;
}
.hero{
    background-color:yellow;
    grid-area: hr;
}
.cardA{
    background-color:green;
    grid-area: ca;
}
.cardB{
    background-color:blue;
    grid-area: cb;
}
.sidebar{
    background-color:purple;
    grid-area: sb;
}
.footer{
    background-color:pink;
    grid-area: ft;
}


@media (max-width: 800px){
    .grid{
    padding:1%;
    display: grid;
    grid-template-rows: 10vh 10vh 35vh 10vh 10vh 10vh 10vh;
    grid-template-areas: 
    "hd"
    "nv"
    "hr"
    "ca"
    "cb"
    "sb"
    "ft"
    ;
}
}