#wrapper{display: grid;
grid-template-columns: repeat(6, minmax(0, 175px));
grid-template-rows: repeat(12,minmax(0,100px));
    padding-left: 100px;
}
header{grid-row: 1/2;
grid-column: 1/3;}
nav{grid-row: 1/2;
grid-column: 3/-1;}
nav ul{margin: 30px;
padding: 5px;
display: flex;
flex-flow: row nowrap;
list-style-type: none;}
nav ul li{width: 100%;}
main{grid-row: 4/-1;
grid-column: 1/-1;
background-color: gainsboro;}
h2{text-align: center;}
h1 a{text-decoration: none;
color: white;}
nav ul li a{text-decoration: none;
color: white}
#titlebar{
    grid-column: 1/-1;
    grid-row: 1/2;
    background-color: rgba(171, 159, 129, 1);
}
#homehero{
    background-image: url(homehero.jpg);
    grid-column: 1/-1;
    grid-row: 2/4;
    background-size: cover;
background-repeat: no-repeat;
background-position:center;
}
#formhero1{background-image:url(formhero1.jpg);
height:100px;
width: 200px;
background-position:center;
background-size: cover;
background-repeat: no-repeat;}
#formhero2{background-image: url(formhero2.jpg);
height: 100px;
width: 200px;
background-position:center;
background-size: cover;
background-repeat: no-repeat;}
#formhero3{background-image: url(pexels-pixabay-279746.jpg);
height: 100px;
width: 200px;
background-position:center;
background-size: cover;
background-repeat: no-repeat;}
#usehero1{background-image: url(usehero1.jpg);
height: 100px;
width: 200px;
background-position:center;
background-size: cover;
background-repeat: no-repeat;}
#usehero2{background-image: url(formhero2.jpg);
height: 100px;
width: 200px;
background-position:center;
background-size: cover;
background-repeat: no-repeat;}
#usehero3{background-image: url(pexels-pixabay-164595.jpg);
height: 100px;
width: 200px;
background-position:center;
background-size: cover;
background-repeat: no-repeat;}
@media only screen and (max-width: 992px){
  .wrapper{
    display: grid;
    grid-auto-rows: minmax(0px, auto);
    grid-template-columns: minmax(0px, 1fr) minmax(0, 768px) minmax(0px, 1fr)
  
  }
}
@media only screen and (max-width: 768px){
  .wrapper{
    display: grid;
    grid-auto-rows: minmax(0px, auto);
    grid-template-columns: minmax(0px, 0) minmax(0, 100%) minmax(0px, 0)
  
  }
    nav ul{flex-flow: column nowrap;
   }
    #homehero{grid-row: 3/4;} 
    #titlebar{grid-row: 1/3;}
}