body{
    margin:0;
    padding:0;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5em;
}

#site_wrap{
    background-color: red;
    height:200vh;
    display:grid;
    grid-template-columns:
        1fr
        repeat(4,minmax(0,272px))
        1fr
    ;
    grid-gap:0px;
    grid-template-rows: 
        104px
        215px
        373px
        373px
        1fr
    ;
    grid-template-areas:
        "header header header header header header"
        "featured_header featured_header featured_header featured_header featured_header featured_header"
        ". featured_main featured_main featured_main featured_profile ."
        ". content content content content ."
        "footer footer footer footer footer footer"
}


.header{
    background-color:#30D7F9;
    grid-area:header;
}
.featured_header{
    background-color:#3030F9;
    grid-area:featured_header;
}
.featured_main{
    background-color:#1F107F;
    grid-area:featured_main;
}
.featured_profile{
    background-color:#830CD2;
    grid-area:featured_profile;
}
.content{
    background-color:#AC24D4;
    grid-area:content;
}
.footer{
    background-color:#DF26AE;
    grid-area:footer;
}

@media screen and (max-width:480px){
    #site_wrap{
   
    grid-template-areas:
        "header header header header header header"
        "featured_header featured_header featured_header featured_header featured_header featured_header"
        "featured_main featured_main featured_main featured_main featured_main featured_main"
        "content content content content content"
        "footer footer footer footer footer footer"
}
    .featured_profile{
        display:none;
    }
}