/**
 * Ultra-wide / large screen proportional scaling
 * 2000px viewport = 1x (baseline)
 * 4000px viewport = 2x (capped)
 * Scales fonts, spacing, images, heights proportionally.
 */
:root {
  --large-scale: 1;
  --large-base-width: 2000px;
  --large-max-scale: 2;
  --large-scale-range: 2000px;
}

@media (min-width: 2000px) {
  :root {
    --large-scale: calc(1 + (var(--large-max-scale) - 1) * min(1, (100vw - var(--large-base-width)) / var(--large-scale-range)));
  }

  html {
    zoom: var(--large-scale);
  }
}

@supports not (zoom: 1) {
  @media (min-width: 2000px) {
    html {
      zoom: initial;
    }

    body {
      transform: scale(var(--large-scale));
      transform-origin: top center;
      width: calc(100% / var(--large-scale));
      margin-left: auto;
      margin-right: auto;
    }
  }
}