*{ box-sizing:content-box; }
body{ margin: 0; }
.wrapper{
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  background-color:beige;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr) );
}
section{
  margin: 5px;
  padding: 10vmin;
  font-size:15px;
  color:indianred;
  
}
figure{
  margin: 5px; 
  margin-bottom: 80px;
  margin-top: 70px;
  margin-right: 70px; 
  width: 100%; 
}
figure img{ 
  width: 100%;
  display: block;
}

@media (min-width: 700px){ 
  .wrapper{row-gap: 80px;}
  figure{ max-width:350px; }
}



header{
  
  width: 100%;
  max-width: 960px;
  margin: 0 auto 30px auto;
  padding-top: 4px;
  background-color:indianred;
  
}
header img { width: 100%; }

h2{
   text-align: center;
   font-family:fantasy;
   font-size: 30px;
   color:indianred;
   padding: 3vmin;
   background-color: beige;
  }

#banner .content h4 {
  
  position:relative;
  font-family: fantasy;
  color:indianred;
  padding-bottom: 15px;
  width: 100%;
  font-size:20px;
  margin: 0 auto;
}


footer{
  background-color:beige;
  min-height: 100px;
  text-align:center;
}

footer p{
  padding-top: 40px;
}