.collage {
  display: grid;
  gap: 30px;
  padding: 10px;
  grid-template-columns: repeat(3, 1fr); /* 3 columnas por defecto */
  grid-template-rows: repeat(4, 1fr); /* 4 filas por defecto */
  grid-auto-flow: dense; /* Asegura que las celdas se llenen de manera densa */
  margin-top: 100px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
}

.photo {
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 0;
  padding-top: 75%; /* Ajusta la relación de aspecto */
  position: relative;
}

/* Ajuste para pantallas de 900px o menos */
@media (max-width: 900px) {
  .collage {
      grid-template-columns: repeat(2, 1fr); /* 2 columnas */
      grid-template-rows: repeat(6, 1fr); /* 6 filas */
  }
}

/* Ajuste para pantallas de 500px o menos */
@media (max-width: 500px) {
  .collage {
      grid-template-columns: 1fr; /* 1 columna */
      grid-template-rows: repeat(12, 1fr); /* 12 filas */
  }
}