/* Keep the editorial ingredients inside the hero's right-hand visual field. */
@media (min-width: 701px) {
  .range-hero:is(.ginseng, .mango, .sweet, .red, .chestnut) .range-art {
    background-color: #080808;
    background-size: min(88vw, 1570px) auto;
    background-position: 98% 51%;
    background-repeat: no-repeat;
    background-blend-mode: lighten;
  }
  .range-hero:is(.ginseng, .mango, .sweet, .red, .chestnut) .range-art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #080808 18%, transparent 34%, transparent 72%, #080808 88%),
      linear-gradient(90deg, #080808 16%, transparent 42%, transparent 94%, #080808 100%);
  }
}

@media (max-width: 700px) {
  .range-hero:is(.ginseng, .mango, .sweet, .red, .chestnut) .range-art {
    background-color: #080808;
    background-size: auto 350px;
    background-position: 58% bottom 28px;
    background-repeat: no-repeat;
  }
}