/* Only the opening image: preserve the site's existing copy, sections and motion. */
.hero--new-art {
  background: #0b0c0c;
}
.hero--new-art .hero-art img {
  display: block;
  object-fit: cover;
  object-position: 75% top;
}

/* Frame the same original around its subject on phones and portrait iPads.
   The text stays in normal grid flow, so larger text cannot clip the hero. */
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  .hero--new-art {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    height: auto;
    padding: 0;
  }
  .hero--new-art .hero-art {
    position: relative;
    inset: auto;
    display: block;
    grid-area: 1 / 1;
    align-self: start;
    -webkit-mask-image: linear-gradient(#000 74%, transparent 100%);
    mask-image: linear-gradient(#000 74%, transparent 100%);
  }
  .hero--new-art .hero-art img {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 8 / 7;
    object-fit: cover;
    object-position: 94% top;
  }
  .hero--new-art .hero-copy {
    position: relative;
    grid-area: 1 / 1;
    align-self: end;
    width: auto;
    max-width: none;
    min-width: 0;
    inset: auto;
    margin: 82vw clamp(1.15rem, 6vw, 4rem) 2rem;
  }
  .hero--new-art h1 span,
  .hero--new-art h1 em {
    white-space: normal;
  }
  .hero--new-art .hero-shade {
    background: linear-gradient(180deg, transparent 38%, #0b0c0c44 52%, #0b0c0c 74%);
  }
  .hero--new-art .hero-caption {
    display: none;
  }
}