/* Prominent full-width image on over-ons page */
.prominent-image-section {
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  padding: 0 20px;
}

.prominent-image-wrap {
  width: 100%;
  height: 520px;
  border-radius: 0;
  overflow: hidden;
}

.prominent-image-wrap .image-cover {
  object-position: center 30%;
}

@media screen and (max-width: 991px) {
  .prominent-image-wrap {
    height: 420px;
  }
}

@media screen and (max-width: 767px) {
  .prominent-image-wrap {
    height: 350px;
    border-radius: 0;
  }
}

@media screen and (max-width: 479px) {
  .prominent-image-wrap {
    height: 280px;
  }
}

/* Hero background on diensten pages: show bottom of photo */
.div-block-4 {
  background-position: 0 0, 50% 100%;
}

/* Modal popup: show person instead of cropping to center of image */
.image-wrap-modal .image-cover {
  object-position: top;
}

/* Mobile slider for "Ons werk in beeld" gallery on diensten pages */
@media screen and (max-width: 767px) {
  .service-c-hero-images {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    gap: 12px;
    padding: 0 20px;
    scroll-padding: 20px;
  }

  .service-c-hero-images::-webkit-scrollbar {
    display: none;
  }

  .service-c-hero-images {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .image-wrap-service-c {
    scroll-snap-align: center;
    min-width: 80vw;
    max-width: 80vw;
    height: 300px;
  }

  .image-wrap-service-c.inline {
    margin-bottom: 0;
  }
}

@media screen and (max-width: 479px) {
  .image-wrap-service-c {
    min-width: 85vw;
    max-width: 85vw;
    height: 260px;
  }
}