main {
    display:grid;
    grid-template-columns: repeat(4, [col] 1fr);
    grid-template-rows: repeat(4, [row] 1fr);
    justify-items: start;

    grid-template-areas: "one one one one" "two two three three" "four four four four"
}

div {
    background-color: firebrick;
    width:100%;
    height:100px;
}

/*div:nth-child(odd){
    background-color:bisque
}*/

header {
    display: grid;
    grid-template-columns: 6fr 1fr 1fr 1fr 1fr;
    align-items:baseline;
    grid-column-gap: 2%;
}

a{
    text-decoration: none;
    color:dimgray;
}

.one{
    width:100%;
    height:200px;
    grid-area: one;
    background-color:dimgrey;
}
.two{
    width:100%;
    height:200px;
    grid-area: two;
}
.three{
    width:100%;
    height:200px;
    grid-area: three;
    background-color:darkviolet;
}
.four{
    width:100%;
    height:200px;
    grid-area: four;
    background-color:darksalmon;
}



footer{
    background-color:aqua;
}


@media (min-width:1px) and (max-width:650px){
    
    header{
        display:grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        grid-row-gap:5px;

    }
}