.content{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0px 40px 0px;
}
.content .wrapper{
  width: 80%;
  max-width: 1400px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
  gap: 30px;
}

@media(max-width:1200px){
  .content .wrapper{
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
}


@media(max-width:991px){
  .content .wrapper{
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}


@media(max-width:700px){
  .content .wrapper{
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media(max-width:550px){
  .content .wrapper{
    grid-template-columns: 1fr 1fr;
  }
}

@media(max-width:300px){
  .content .wrapper{
    grid-template-columns: 1fr;
  }
}