body {
    margin: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.grid {
    display: grid;
    grid-template-columns: repeat(2, 25%) repeat(1, 20%) repeat(1, 30%);
    grid-template-rows: repeat(2, 9vh) repeat(2, 38vh) repeat(1, 9vh);
    grid-template-areas: 
        "hd hd hd hd"
        "nav nav nav nav"
        "hero hero cardA ad"
        "hero hero cardB ad"
        "ft ft ft ft"
  ;
}

.header {
    background-color: rgb(255, 144, 144);
    grid-area: hd;
}
.nav {
    background-color: rgb(255, 208, 121);
    grid-area: nav;
}
.hero {
    background-color: rgb(255, 255, 145);
    grid-area: hero;
}
.cardA {
    background-color: rgb(142, 255, 142);
    grid-area: cardA;
}
.cardB {
    background-color: rgb(174, 221, 255);
    grid-area: cardB;
}
.sideBar {
    background-color: rgb(174, 174, 255);
    grid-area: ad;
}
.footer {
    background-color:rgb(255, 144, 144);
    grid-area: ft;
}

@media screen and (max-width:780px) {
    .grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(2, 11vh) repeat(1, 36vh) repeat(2, 10vh) repeat(2, 11vh) ;
    grid-template-areas: 
        "hd"
        "nav"
        "hero"
        "cardA"
        "cardB"
        "ad"
        "ft"
  ;
}
}