.responsive .q1{
  grid-area: q1;
}
.responsive .q2{
  grid-area: q2;
}
.responsive .q3{
  grid-area: q3;
}
.responsive .q4{
  grid-area: q4;
}
.quotes{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas:
 "q1 q2 q3 q4"
 "q5 q6 q7 q8";
} 

.quotes-container h4 {
    color:  #E0E5E9;
    margin-bottom: 2vw;
}

.quotes-container h2 {
    margin-top: 2vw;
    color:  #007FFF;
    
}

.quotes-container div.gallery {
    background-color: #191718;
    margin: 1vw;
  }

  

  
 
  
  .quotes-container .gallery img {
    width: 100%;
    height: 200px;
  }
  
  .quotes-container  div.desc {
    padding: 15px;
    font-size: 18px;
    text-align: center;
    color: #E0E5E9;
    
  }

  .quotes-container  p{
    font-size: 11px;
    text-align: center;
    color: #007FFF;
  }

  
  .quotes-container .responsive {
    min-width: 350px ; 
    padding: 0 6px;
    float: left;
    
  }
  @media only screen and (max-width: 1024px) {


  .quotes{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
   "q1 q2"
   "q3 q4"
   "q5 q6"
   "q7 q8";
  } 
  }
  @media only screen and (max-width: 700px) {
    .quotes{
      display: flex;
      flex-direction: column;
  }

  .quotes-container .gallery img {
    width: 100%;
    height: auto;
  }
}