.hero {
  --hero-intro-limit: var(--intro-w);
  --hero-tagline-limit: calc(100vw - 120px);
}

.hero .card-intro,
.hero .card-line2 {
  display: block;
  width: max-content;
  height: auto;
  min-height: 0;
}

.hero .card-intro {
  max-width: var(--hero-intro-limit);
}

.hero .card-intro > span {
  width: auto;
}

.hero .hero-phrase { white-space: nowrap; }

.hero-lower-cards { display: contents; }

.hero .card-line2 {
  max-width: var(--hero-tagline-limit);
  white-space: normal;
}

@media (min-width: 1280px) {
  .hero {
    --hero-card-pad-x: clamp(17.78px, 1.3889vw, 26.67px);
    --hero-intro-pad-y: clamp(14.22px, 1.1111vw, 21.33px);
    --hero-tagline-pad-y: clamp(10.67px, 0.8333vw, 16px);
    --hero-intro-limit: calc(var(--intro-w) + (var(--hero-card-pad-x) - var(--intro-pad-left)) * 2);
  }
  .hero .card-intro {
    left: calc(var(--intro-left) + var(--intro-w) / 2);
    padding: var(--hero-intro-pad-y) var(--hero-card-pad-x);
    transform: translateX(-50%);
  }
  .hero .card-line2 {
    padding: var(--hero-tagline-pad-y) var(--hero-card-pad-x);
  }
  html[lang^="zh"] .hero .card-line2 {
    left: calc(var(--line2-left) + var(--line2-w) / 2);
    transform: translateX(-50%);
  }
}

/* Mobile anchors retain the card centres from the original 390px composition. */
@media (max-width: 600px) {
  .hero {
    --hero-intro-limit: min(220px, calc(100vw - 48px));
    --hero-tagline-limit: calc(100vw - 48px);
  }
  .hero .card-intro {
    left: calc(162px + var(--m-center-shift));
    transform: translateX(-50%);
  }
  html[lang^="zh"] .hero {
    --hero-intro-limit: min(174px, calc(100vw - 48px));
  }
  html[lang^="zh"] .hero .card-intro {
    left: calc(139px + var(--m-center-shift));
  }
}

@media (min-width: 601px) and (max-width: 1279px) and (max-aspect-ratio: 4/3) {
  .hero {
    --hero-intro-limit: min(var(--ipad-intro-w), calc(100vw - 48px));
    --hero-tagline-limit: calc(100vw - 48px);
  }
}

@media (max-width: 1279px) and (aspect-ratio > 4/3) {
  .hero {
    --hero-intro-limit: min(21.1111vw, 37.0732vh);
    --hero-tagline-limit: calc(100vw - 48px);
  }
  .hero .card-intro,
  html[lang^="zh"] .hero .card-intro,
  html[lang^="zh"] .hero .card-line2 {
    left: auto;
    transform: none;
  }
}

@media (max-width: 600px) and (max-aspect-ratio: 4/3) {
  .hero {
    --hero-badge-width: 138px;
    --hero-lower-left: calc(236px + var(--m-lower-shift));
    --hero-lower-top: 465px;
    --hero-tagline-crossing-x: 8px;
  }
  html[lang^="zh"] .hero {
    --hero-lower-left: calc(215px + var(--m-center-shift));
    --hero-lower-top: 463px;
    --hero-tagline-crossing-x: -8px;
  }
  .hero .hero-lower-cards {
    display: block;
    position: absolute;
    left: var(--hero-lower-left);
    top: var(--hero-lower-top);
    width: var(--hero-badge-width);
    pointer-events: none;
  }
  .hero .hero-lower-cards .card-name {
    left: 0;
    right: auto;
    top: 0;
    width: 100%;
  }
  .hero .hero-lower-cards .card-line2 {
    left: auto;
    right: calc(var(--hero-badge-width) / 2 - var(--hero-tagline-crossing-x));
    /* The badge SVG's viewBox is 185 × 132; 66 / 185 locates its vertical centre. */
    top: calc(var(--hero-badge-width) * 66 / 185 + 24px);
    transform: none;
    padding-top: 12px;
  }
}