/* Responsive skintherx campaign collage hero. */
.skintherx-hero-collage-section { background: #29384a; }
.skintherx-hero-collage { position: relative; height: clamp(600px, 88vh, 760px); overflow: hidden; isolation: isolate; }
.skintherx-hero-collage__grid { position: relative; height: 100%; background: #29384a; }
.skintherx-hero-collage__grid picture, .skintherx-hero-collage__grid img { display: block; width: 100%; height: 100%; border: 0 !important; outline: 0; }
.skintherx-hero-collage__grid picture { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .55s ease, visibility .55s ease; }
.skintherx-hero-collage__grid picture.is-active { opacity: 1; visibility: visible; }
.skintherx-hero-collage__grid img { object-fit: cover; object-position: center top; }
.skintherx-hero-collage::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(24,35,49,.74), rgba(24,35,49,.18) 62%, rgba(24,35,49,.32)), linear-gradient(0deg, rgba(24,35,49,.5), transparent 48%); pointer-events: none; }
.skintherx-hero-collage__controls { position: absolute; z-index: 3; right: clamp(22px, 5vw, 70px); bottom: 28px; left: clamp(22px, 5vw, 70px); display: flex; align-items: center; justify-content: space-between; }
.skintherx-hero-collage__dots { display: flex; align-items: center; gap: 9px; margin: 0 auto; }
.skintherx-hero-collage__dots button { width: 8px; height: 8px; padding: 0; border: 1px solid rgba(255,255,255,.9); border-radius: 50%; background: transparent; cursor: pointer; }
.skintherx-hero-collage__dots button.is-active { background: #fff; transform: scale(1.35); }
.skintherx-hero-collage__arrow { display: grid; width: 34px; height: 34px; place-items: center; padding: 0 0 4px; border: 1px solid rgba(255,255,255,.75); border-radius: 50%; background: rgba(24,35,49,.24); color: #fff; font-size: 25px; line-height: 1; cursor: pointer; }
.skintherx-hero-collage__arrow:hover { background: #fff; color: #29384a; }
@media (max-width: 767px) {
  .skintherx-hero-collage { height: 760px; }
  .skintherx-hero-collage__grid { height: 100%; }
  .skintherx-hero-collage::after { background: linear-gradient(0deg, rgba(24,35,49,.78), rgba(24,35,49,.03) 72%); }
}