/* Page-specific concept imagery; customer galleries keep their existing styles. */
.page-concept-hero {
  --concept-position: 50% 50%;
  --concept-mobile-position: 50% 35%;
  margin: 0;
  min-width: 0;
}

.page-concept-hero .hero-slideshow {
  aspect-ratio: 1122 / 1402;
  background: #e8e0d5;
}

.page-concept-hero .hero-slideshow .slide {
  object-fit: cover;
  object-position: var(--concept-position);
}

.page-concept-hero--bespoke {
  --concept-mobile-position: 50% 30%;
}

.page-concept-hero--hair-stroke {
  --concept-mobile-position: 52% 43%;
}

.page-concept-hero--mens {
  --concept-mobile-position: 50% 27%;
}

.page-concept-hero--lash {
  --concept-mobile-position: 57% 36%;
}

.page-concept-hero .page-concept-caption {
  margin: 12px 0 0;
  color: #73695d;
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.015em;
}

.page-concept-hero .page-concept-caption span {
  letter-spacing: 0;
}

@media (max-width: 860px) {
  .page-concept-hero .hero-slideshow {
    aspect-ratio: 4 / 3.4;
  }

  .page-concept-hero .hero-slideshow .slide {
    object-position: var(--concept-mobile-position);
  }

  .page-concept-hero .page-concept-caption {
    margin-top: 9px;
    font-size: 10px;
  }
}