/* Hero imagery only. Existing hero height, copy and all other sections are unchanged. */
.hero-art {
  width: 100%;
}

.hero-art picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-art img {
  object-fit: cover;
  object-position: center;
}

/* The image occupies the existing full-height hero behind tablet/desktop copy. */
@media (min-width: 600px) {
  .hero-art {
    inset: 0;
    width: 100%;
    height: 100%;
  }
}

/* Trim only the panorama's left context on narrower desktop screens. */
@media (min-width: 1100px) {
  .hero-art img {
    object-position: right center;
  }
}

/* Blend the photograph into the existing mobile copy area without changing its size. */
@media (max-width: 599px) {
  .hero-art::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 20px;
    background: linear-gradient(#0b0b0b, transparent);
    pointer-events: none;
  }
}