/* Between the two mockup widths (1200–1439) the desktop layout is drawn for
 * 1440 with fixed columns. These rules let the fixed widths give: proportions
 * from the frames, pixels from the viewport. Nothing here fires at 1440. */
@media (min-width: 1200px) and (max-width: 1439px) {
  :root { --container-pad: 40px; --container-pad-wide: 48px; }
  .hero__left { width: 52.8%; padding-left: 40px; }
  .hero__line { width: auto; }
  .hero__lead { width: auto; max-width: 560px; }
  .markets__hint { width: auto; max-width: 340px; }
  .slip { width: 340px; }
  .fx__odds, .board__col--odds { width: 300px; }
  .collage__grid { height: auto; }
  .pcard--1, .pcard--2, .pcard--3 { width: calc((100% - 48px) / 3); height: 300px; margin-left: 0; transform: none; }
  .jump__body { gap: 40px; }
  .jump__photo { width: 30%; height: auto; aspect-ratio: 400 / 440; }
  .race__track { width: auto; flex: 1; }
  .race__type { width: 150px; }
  .shero__grid { gap: 40px; }
  .shero__text { width: 56%; }
  .shero__line { width: auto; }
  .shero__lead { width: auto; max-width: 560px; }
  .shero__photo { width: 40%; height: auto; aspect-ratio: 512 / 640; }
  .featured__media { width: 60%; height: auto; aspect-ratio: 780 / 380; }
  .featured__info { width: auto; flex: 1; }
  .rhero__inner { gap: 40px; padding-inline: 40px; }
  .rhero__left { width: 55%; }
  .rhero__line { width: auto; }
  .rhero__lead { width: auto; max-width: 560px; }
  .rhero__photo { width: 42%; height: auto; aspect-ratio: 560 / 360; }
  .meetings__grid { width: auto; }
  .meeting { width: auto; flex: 1; }
  .masthead__title { font-size: 64px; line-height: 60px; }
  .runners__col--barrier, .runner__barrier { width: 80px; }
  .runners__col--jt, .runner__jt { width: 140px; }
  .runners__col--odds, .runner__odds { width: 200px; }
  .runners__col--odds span, .odd--race { width: 96px; }
  .sd-hero__left { width: 56%; }
  .sd-hero__line { width: auto; }
  .sd-diagram { width: 40%; height: auto; padding: 32px; }
  .sd-diagram__inner { width: auto; height: auto; gap: 24px; }
  .sd-acc { width: auto; flex: 1; }
  .sd-cta__left { width: 62%; }
  .hw-hero__left { width: 53%; padding-left: 40px; }
  .hw-hero__line { width: auto; }
  .hw-hero__lead { width: auto; }
  .hw-step { gap: 40px; padding-inline: 48px; }
  .hw-step__text { width: 46%; }
  .hw-step__text--wide { width: 60%; }
  .hw-step__visual { width: auto; flex: 1; }
  .hw-step__visual--slip { width: 36%; flex: none; }
  .rgp-hero__left { width: auto; flex: 1; }
  .rgp-card { width: 38%; }
  .rgp-sec__left { width: 30%; }
  .rgp-sec { gap: 48px; }
  .hp-hero__left, .lg-hero__left { width: 62%; }
  .hp-hero__right, .lg-hero__right { width: auto; }
  .hp-hero__lead, .lg-hero__lead { width: auto; }
  .topics { column-gap: 8px; }
  .topic__left { width: 34%; }
  .topic__headline { width: auto; }
  .ct-hero__lead { width: auto; max-width: 720px; }
  .ct-row { gap: 40px; }
  .ct-quick { width: 34%; }
  .bs-hero { padding-inline: 48px; }
  .bs-hero__panel { white-space: normal; }
  .bs-hero__bar, .bs-hero__star, .bs-hero__deco { display: none; }
  .bs-out { padding-inline: 48px; }
  .bs-step--lime, .bs-step--cream, .bs-step--dark { width: auto; flex: 1; }
  .bs-trans__text { width: auto; flex: 1; }
  .mk-hero__left { width: auto; flex: 1; }
  .mk-card { width: 38%; }
  .lg-body { padding-inline: 48px; }
  .site-footer__brand { width: auto; }
  .site-footer__nav { gap: 32px; }
}