.cliente-masonry {
  width: 1200px;
  margin: -15px auto 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(390px, 1fr));
  grid-auto-rows: 390px;
  grid-auto-flow: dense;
  gap: 5px;
}

.cliente-masonry .celda {
  background-color: rgb(225, 225, 225);
  border-radius: 10px;
  overflow: hidden;
}

.cliente-masonry .celda picture,
.cliente-masonry .celda img {
  width: 100%;
  height: 100%;
  display: block;
}

.cliente-masonry .celda img {
  object-fit: cover;
}










/* Combinaciones variables de celdas*/
.cliente-masonry .item-1 {
  grid-column: span 1;
  grid-row: span 1;
}

.cliente-masonry .item-2 {
  grid-column: span 1;
  grid-row: span 1;
}

.cliente-masonry .item-3 {
  grid-column: span 1;
  grid-row: span 1;
}

.cliente-masonry .item-4 {
  grid-column: span 1;
  grid-row: span 1;
}

.cliente-masonry .item-5 {
  grid-column: span 1;
  grid-row: span 1;
}

.cliente-masonry .item-6 {
  grid-column: span 1;
  grid-row: span 1;
}

.cliente-masonry .item-7 {
  grid-column: span 1;
  grid-row: span 1;
}

.cliente-masonry .item-8 {
  grid-column: span 1;
  grid-row: span 1;
}

.cliente-masonry .item-9 {
  grid-column: span 1;
  grid-row: span 1;
}










@media (max-width: 1200px) {
  .cliente-masonry {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }
  
  .cliente-masonry {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    padding: 0 20px;
  }

  .cliente-masonry .celda {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
    height: 350px;
  }
}