/* IMPORT THE FRAMEWORK */
.gallery-images {
  position: relative;
}

.gallery-images .image img {
  display: block;
}

.gallery-images .image {
  box-sizing: border-box;
}

.gallery-images {
  display: flex;
  flex-wrap: wrap;
}

.gallery-images {
  padding-left: 5%;
  padding-right: 5%;
}
@media screen and (min-width: 1921px) {
  .gallery-images {
    padding-left: 7.5%;
    padding-right: 7.5%;
  }
}

.gallery-images {
  padding-top: 130px;
  padding-bottom: 130px;
}
@media screen and (min-width: 451px) and (max-width: 1200px) {
  .gallery-images {
    padding-top: 4.5em;
    padding-bottom: 4.5em;
  }
}
@media screen and (max-width: 450px) {
  .gallery-images {
    padding-top: 3em;
    padding-bottom: 3em;
  }
}

.hero-text {
  color: #FFFFFF;
}

.webp .hero {
  background-image: url("/app/images/gallery/hero.webp");
}

.no-webp .hero {
  background-image: url("/app/images/gallery/hero.jpg");
}

.gallery-images .image {
  width: 20%;
}
.gallery-images .image img {
  width: 100%;
}

@media screen and (min-width: 961px) and (max-width: 1112px) {
  .gallery-images .image {
    width: 33.33%;
  }
}
@media screen and (max-width: 960px) {
  .gallery-images .image {
    width: 50%;
  }
}