/* Keep the feature card in document flow, including browser zoom/reflow. */
@media (min-width: 641px) {
  html .hero {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    column-gap: clamp(28px, 4vw, 64px);
    row-gap: 28px;
    align-items: end;
    padding: 150px max(24px, calc((100% - 1180px) / 2)) 72px;
    height: auto;
  }

  html .hero > .hero-content {
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  html .hero > .featured-match {
    position: relative;
    inset: auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
    align-self: end;
    box-sizing: border-box;
  }

  html .hero h1,
  html .hero .hero-copy-group,
  html .hero .hero-live-status { max-width: 100%; }
  html .hero h1,
  html .hero .feature-teams strong { overflow-wrap: anywhere; }
  html .hero .hero-actions { flex-wrap: wrap; }
  html .hero .hero-actions > * { min-width: 0; max-width: 100%; }
}

@media (min-width: 641px) and (max-width: 1100px) {
  html .hero { grid-template-columns: minmax(0, 1fr); }
  html .hero > .featured-match { max-width: 640px; }
}