/* SCSS PARA UN GRID RESPONSIVE DE UN CONTAINER */
.container-box {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.container-percentage {
  width: 75%;
}

/* NOT SM */
@media (max-width: 639px) {
  .container-percentage, .container-box {
    width: 100%;
    max-width: 100%;
  }
}
/* SM */
@media (min-width: 640px) {
  .container-percentage, .container-box {
    max-width: 540px;
  }
}
/* MD */
@media (min-width: 768px) {
  .container-percentage, .container-box {
    max-width: 720px;
  }
}
/* LG */
@media (min-width: 1024px) {
  .container-percentage, .container-box {
    max-width: 960px;
  }
}
/* XL */
@media (min-width: 1280px) {
  .container-percentage {
    max-width: 1280px;
  }
  .container-box {
    max-width: 1200px;
  }
}
/* GRIDs */
.grid-galery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-gap: 5em;
}

.grid-galery-dynamic-height {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  grid-gap: 5em;
}

.grid-galery-dynamic-height > * {
  height: -moz-max-content;
  height: max-content;
}

@media (max-width: 400px) {
  .grid-galery-dynamic-height {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
}