body{
    margin:0;
    padding:0;
    font-family: cooper, arial, helvetica, sans-serif;
    line-height: 1.5em;
}

#site_wrap{
    background-image: url('Images/Repeat\ Grid\ 1.png');
    height:100vh 100vw;
    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{ 
    grid-area:header;
    display:flex;
    align-items: center;
    justify-content: space-between;
}
.header .logo {
    width:318px
}
.header .nav{
list-style: none;
padding:0;
display:flex;
}

.header .nav a{
text-decoration: none;
border:2px solid #8C8149;
border-radius:50em;
color: #403D2F;
padding:15px 30px;
margin:0px 8px;
text-transform: uppercase;
font-weight: bold;
display: inline-block;
}

.header .nav a:hover, .header .nav .active{
    background-color: #8C8149;
    color:white;
}

.featured_header{
    background-image: url(Images/AdobeStock_86368268.png);
    grid-area:featured_header;
    background-size:cover;
}
.featured_main{

    grid-area:featured_main
}
.featured_main h1{
    color:#403D2F;
}
.featured_main p{
    Color: #403D2F
}
.btn{
   text-decoration: none;
   background-color: #8C8149;
border:2px solid #8C8149;
border-radius:50em;
color: white;
padding:15px 30px;
margin:0px 8px;
text-transform: uppercase;
font-weight: bold; 
float:center;
}

.featured_main a:hover, .btn .nav .active{
    background-color: #403D2F;
    color:white;
}
.featured_profile{
    padding: 2m 1m;
    grid-area:featured_profile
}
.content{
    grid-area:content;
    display:flex;
}
.content img{
    margin: 2em 5px 2em 5px;
}
.footer{
    background-color: #F2DABD;
    grid-area:footer;
    text-align: center;
    padding-top: 2em;
}

@media screen and (max-width:480px){
    .hide-on-mobile{
        display:none;
    }
#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 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{
    grid-area:content;
    display:flex;
    flex-direction: column;
}
}