/* Only the RESPONSIVE mobile artwork changes; layout and Classic are untouched. */
@media (max-width: 767px) {
  body[data-edition="responsive"] .hero {
    --focus-width: min(100vw, 350px);
    --focus-y: 0px;
    --focus-bottom: 530px;
    background-size: var(--focus-width) auto;
    background-position: center var(--focus-y);
  }
  body[data-edition="responsive"] .hero::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    --focus-gutter: max(0px, calc((100% - var(--focus-width)) / 2));
    background: linear-gradient(90deg,
      #10142e var(--focus-gutter), transparent calc(var(--focus-gutter) + 24px),
      transparent calc(100% - var(--focus-gutter) - 24px),
      #10142e calc(100% - var(--focus-gutter)));
  }
  body[data-edition="responsive"] .hero::after {
    content: "";
    position: absolute;
    z-index: 1;
    pointer-events: none;
    inset: max(var(--focus-bottom), calc(var(--focus-y) + var(--focus-width) * 1912 / 1080 - 72px)) 0 0;
    background: linear-gradient(180deg, transparent, #10142e 72px);
  }
}