@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');



.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: auto;
 margin-left: 20px;
 margin-right: 20px;

}


.menu {
  grid-area: menu;
  margin-top: 35px;


  
}


.slider{
 grid-area: slider;
 margin-top: 30px;

}

.content {
  grid-area: content;
  color: white;
  line-height: 2.5;
  margin-top: 50px;
  border: solid black;
  padding: 30px 30px 30px 30px;
  background-color: brown;
    
}


.imagem{
  grid-area: imagem;
  text-align: center;
  margin-top: 50px;
 
}

.imagem1{
  grid-area: imagem1;
  text-align: center;
  margin-top: 50px;
  font-family: 'Roboto', sans-serif;
  font-size: 35px;
  color: white;
  background-color: brown;
}

.imagem2{
  grid-area: imagem2;
  text-align: center;
  margin-top: 50px;
  font-family: 'Roboto', sans-serif;
  font-size: 35px;
  color: white;
  background-color: brown;
}

.imagem3{
  grid-area: imagem3;
  text-align: center;
  margin-top: 50px;
  font-family: 'Roboto', sans-serif;
  font-size: 35px;
  color: white;
  background-color: brown;
}

.imagem4{
  grid-area: imagem4;
  text-align: center;
  margin-top: 50px;
  font-family: 'Roboto', sans-serif;
  font-size: 35px;
  color: white;
  background-color: brown;
}

.imagem5{
  grid-area: imagem5;
  text-align: center;
  margin-top: 50px;
  font-family: 'Roboto', sans-serif;
  font-size: 35px;
  color: white;
  background-color: brown;
}

.imagem6{
  grid-area: imagem6;
  text-align: center;
  margin-top: 50px;
  font-family: 'Roboto', sans-serif;
  font-size: 35px;
  color: white;
  background-color: brown;
}

.imagem7{
  grid-area: imagem7;
  text-align: center;
  margin-top: 50px;
  font-family: 'Roboto', sans-serif;
  font-size: 35px;
  color: white;
  background-color: brown;
}

.imagem8{
  grid-area: imagem8;
  text-align: center;
  margin-top: 50px;
  font-family: 'Roboto', sans-serif;
  font-size: 35px;
  color: white;
  background-color: brown;
}


.form{
  grid-area: form;
  background-color: darkorange;
  color: white;
  margin-top: 30px;
}

.footer {
  grid-area: footer;
  margin-top: 50px;

}

.grid-template-areas-1 {
  grid-template-areas:
    "menu menu menu menu"
    "slider slider slider slider"
    "content content content content"
    "imagem imagem imagem imagem"
    "imagem1 imagem2 imagem3 imagem4"
    "imagem5 imagem6 imagem7 imagem8"
    "form form form form"
    "footer footer footer footer"
    ;
}



h1 {
  font-family: 'Roboto', sans-serif;
  font-size: 100px;
  text-align: center;
  text-decoration: underline
 
}

p{
  text-align: justify;
  font-family: 'Roboto', sans-serif;
  font-size: 30px;
  
}


.navbar-nav a{

font-family: 'Roboto', sans-serif;
font-size: 24px;
text-align: center;

}

.navbar-nav a:hover {
  background-color: brown;
  font-size: 150%;
  font-weight: 100px;

}

a:hover {
  
  font-size: 180%;
  font-weight: 100px;

}




@media (min-width: 320px) {

.grid-template-areas-1 {
  grid-template-areas:
    "menu "
    "slider"
    "content"
    "imagem"
    "imagem1"
    "imagem2"
    "imagem3"
    "imagem4"
    "imagem5"
    "imagem6"
    "imagem7"
    "imagem8"
    "form"
    "footer"
    ;
}


@media (min-width: 768px) {

.grid-template-areas-1 {
  grid-template-areas:
    "menu menu menu menu"
    "slider slider slider slider"
    "content content content content"
    "imagem imagem imagem imagem"
    "imagem1 imagem2 imagem3 imagem4"
    "imagem5 imagem6 imagem7 imagem8"
    "form form form form"
    "footer footer footer footer"
    ;
}

}