/* Keep the portrait blend attached to the picture, including its mobile crop.
   The image alone is mirrored: the gradients must stay in page coordinates. */
.homeHero__veil {
  display: none;
}

.homeHero__image::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  height: auto;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, #050505 0%, rgba(5,5,5,0) 22%, rgba(5,5,5,0) 88%, #050505 100%),
    linear-gradient(0deg, #050505 0%, rgba(5,5,5,.8) 7%, rgba(5,5,5,0) 30%);
}

@media (max-width: 767px) {
  .homeHero {
    --home-portrait-height: clamp(360px, 125vw, 700px);
  }

  .homeHero__image {
    height: var(--home-portrait-height);
    max-height: none;
  }

  .homeHero__image img {
    object-position: center top;
  }

  .homeHero__image::after {
    background:
      linear-gradient(90deg, #050505 0%, rgba(5,5,5,0) 12%, rgba(5,5,5,0) 88%, #050505 100%),
      linear-gradient(0deg, #050505 0%, rgba(5,5,5,.94) 6%, rgba(5,5,5,.55) 16%, rgba(5,5,5,0) 34%);
  }

  .homeHero__inner {
    padding-top: calc(62px + var(--home-portrait-height) - 48px);
  }
}
