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

#site_wrap{
    background-color: white;
    height:200vh;
    display:grid;
    grid-template-columns:
        1fr
        repeat(4,minmax(0,272px))
        1fr
    ;
    grid-gap:0px;
    grid-template-rows: 
        104px
        215px
        min-content
        min-content
        1fr
    ;
    grid-template-areas:
        ". 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:white;
    grid-area:header;
    display:flex;
    align-items:center;
    justify-content: space-between;
}
.header .logo{
    width:111px;
}
.header .nav{
    list-style:none;
    padding:0;
    display:flex;
}
.header .nav a{
    text-decoration:none;
    border:2px solid #0BF285;
    border-radius:50em;
    color:#0BF285;
    padding:35px 31px;
    margin:0 9px;
    text-transform: uppercase;
    font-weight:bold;
    display:inline-block;
}

.header .nav a:hover, .header .nav .active{
    background-color:#0BF285;
    color:white;
}
.featured_header{
    background-image:url('DillonDesign/pexels-umkreisel-app-956981.png');
    grid-area:featured_header;
    background-size: cover;
}
.featured_main{
   
    grid-area:featured_main;
}
.featured_main h1{
    color:#707070;
}
.featured_main p{
    color:#707070;
}
.btn{
    text-decoration:none;
    background-color:#AB63F2;
    border:2px solid #AB63F2;
    border-radius:50em;
    color:white;
    padding:35px 31px;
    margin:0 9px;
    text-transform: uppercase;
    font-weight:bold;
    float: right;
}
.featured_profile{
    padding:2em 1em;
    grid-area:featured_profile;
}
.content{
    grid-area:content;
    display:flex;
}
.content img{
    margin:0 5px 2em 5px;
}
.footer{
    background-color:#04DBF2;
    color:gray;
    text-align:center;
    padding-top:2em;
    grid-area:footer;
}

@media screen and (max-width:480px){
    #site_wrap{
        grid-template-rows: 
        min-content
        215px
        min-content
        min-content
        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_main featured_main featured_main"
            "content content content content content"
            "footer footer footer footer footer footer"
    }
    .featured_profile{
        display:none;
    }
    .header .nav{
        list-style:none;
        padding:0;
        display:flex;
        flex-direction: column;
    }
    .header .nav a{
        margin:.5em;
    }
    .content{
    
        flex-direction: column;

    }
}