body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 1vh;
}

:root {
    --lighterBlue: #436CB8;
    --dullBlue: #4C638F;
    --brightBlue: #2E6CE1;
    --mutedBlue: #444E61;
    --flatBlack: #313338;
    --flatDarkBlue: #2F343D;
}

.grid {
    display: grid;
    grid-template-columns: repeat(4, 2fr);
    grid-template-rows: repeat(15, 10vh);
    grid-template-areas: 
    "hd hd hd hd"
    "hd hd hd hd"
    "nv nv nv nv"
    "md md cda ad"
    "md md cda ad"
    "md md cda ad"
    "md md cda ad"
    "md md cda ad"
    "md md cdb ad"
    "md md cdb ad"
    "md md cdb ad"
    "md md cdb ad"
    "md md cdb ad"
    "ft ft ft ft"
    "ft ft ft ft"
    ;
}

.cell {
    color: white;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1vh;
}

.cell1 {
    background-color: var(--dullBlue);
    grid-area: hd;
    
}

.cell2 {
   background-color: var(--brightBlue);
   grid-area: nv;
}

.cell3 {
    background-color: var(--mutedBlue);
    grid-area: md;
}

.cell4 {
    background-color: var(--mutedBlue);
    grid-area: cda;
}

.cell5 {
    background-color: var(--mutedBlue);
    grid-area: cdb;
}

.cell6 {
    background-color: var(--mutedBlue);
    grid-area: ad;
}

.cell7 {
    background-color: var(--dullBlue);
    grid-area: ft;
}

@media screen and (max-width: 950px){

    .cell {
        margin: 0.5vh;
    }

    .grid {
    display: grid;
    grid-template-columns: repeat(4, 2fr);
    grid-template-rows: repeat(9, 15vh);
    grid-template-areas: 
    "hd hd hd hd"
    "nv nv nv nv"
    "md md md md"
    "md md md md"
    "md md md md"
    "cda cda cda cda"
    "cdb cdb cdb cdb"
    "ad ad ad ad"
    "ft ft ft ft"
    ;
}
}