.main-content {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 16px;
  row-gap: 40px;
}

@media (min-width: 600px) {
  .main-content {
    grid-template-columns: 1fr;
  }
}

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

@media (min-width: 1100px) {
  .main-content {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media  (min-width: 1600px) {
  .main-content {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

@media (min-width: 1900px){
  .main-content {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr ;
  }
}

@media (min-width: 2250px) {
  .main-content {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  }
}