/* A single photographic scene fades into the copy area. Keep the copy as live HTML. */
.store-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  height: 390px;
  min-height: 0;
  background: #fcfaf5;
  overflow: hidden;
}

.store-hero .hero-photograph {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 73%;
  height: 100%;
  min-height: 0;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 60%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 60%, transparent 100%);
}

.store-hero .hero-photograph > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 72%;
}

.store-hero .hero-copy {
  position: relative;
  z-index: 1;
  flex: 0 0 46%;
  width: 46%;
  background: transparent;
}

.store-hero .hero-stamp { left: 18px; bottom: 13px; }

@media (min-width: 1450px) {
  .store-hero { height: 425px; }
}

@media (max-width: 800px) {
  .store-hero { height: 275px; }
  .store-hero .hero-copy { flex-basis: 53%; width: 53%; padding: 22px; }
  .store-hero .hero-copy h1 { font-size: clamp(27px, 4.5vw, 38px); }
  .store-hero .hero-photograph {
    width: 84%;
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 41%, transparent 87%);
    mask-image: linear-gradient(to right, #000 0%, #000 41%, transparent 87%);
  }
}

@media (max-width: 540px) {
  .store-hero { height: 222px; }
  .store-hero .hero-copy { flex-basis: 58%; width: 58%; padding: 18px 15px; }
  .store-hero .hero-copy h1 { font-size: clamp(21px, 5.5vw, 27px); line-height: 1.42; white-space: normal; }
  .store-hero .hero-copy .eyebrow { font-size: 9px; }
  .store-hero .hero-copy > p { display: block; font-size: 10px; line-height: 1.55; }
  .store-hero .hero-copy .desktop-only { display: none; }
  .store-hero .hero-detail, .store-hero .hero-stamp { display: none; }
  .store-hero .hero-cta { margin-top: 10px; min-height: 36px; min-width: 124px; }
  .store-hero .hero-photograph {
    width: 91%;
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 28%, transparent 70%);
    mask-image: linear-gradient(to right, #000 0%, #000 28%, transparent 70%);
  }
}

@media (max-width: 360px) {
  .store-hero { height: 210px; }
  .store-hero .hero-copy { flex-basis: 60%; width: 60%; padding: 14px 12px; }
  .store-hero .hero-copy h1 { font-size: 20px; }
  .store-hero .hero-copy > p { font-size: 9px; }
  .store-hero .hero-cta { min-width: 110px; }
}