:root {
  --min-vw: 320;
  --max-vw: 1920;

  --min-vw-px: calc(var(--min-vw) * 1px);
  --max-vw-px: calc(var(--max-vw) * 1px);

  /* === Font Sizes === */
  --text-h1: 68;
  --text-h1-min: 55.23;

  --text-h2: 56;
  --text-h2-min: 45.48;

  --text-h3: 48;
  --text-h3-min: 38.98;

  --text-h4: 40;
  --text-h4-min: 32.48;

  --text-h5: 32;
  --text-h5-min: 25.99;

  --text-h6: 28;
  --text-h6-min: 22.74;

  --text-body-lg: 20;
  --text-body-lg-min: 16.24;

  --text-body-md: 16;
  --text-body-md-min: 12.99;

  --text-body-sm: 12;
  --text-body-sm-min: 9.84;

  --text-button: 16;
  --text-button-min: 12.99;
}

/* =============== */
/* === FLUIDS === */
/* =============== */

.heading1 {
  --max-fs: var(--text-h1);
  --min-fs: var(--text-h1-min);
  font-size: clamp(
    calc(var(--min-fs) * 1px),
    calc(
      ((var(--text-h1) - var(--text-h1-min)) / (var(--max-vw) - var(--min-vw))) *
        (100vw - var(--min-vw-px)) + calc(var(--text-h1-min) * 1px)
    ),
    calc(var(--max-fs) * 1px)
  ) !important;
}

.heading2 {
  --max-fs: var(--text-h2);
  --min-fs: var(--text-h2-min);
  font-size: clamp(
    calc(var(--min-fs) * 1px),
    calc(
      ((var(--text-h2) - var(--text-h2-min)) / (var(--max-vw) - var(--min-vw))) *
        (100vw - var(--min-vw-px)) + calc(var(--text-h2-min) * 1px)
    ),
    calc(var(--max-fs) * 1px)
  ) !important;
}

.heading3 {
  --max-fs: var(--text-h3);
  --min-fs: var(--text-h3-min);
  font-size: clamp(
    calc(var(--min-fs) * 1px),
    calc(
      ((var(--text-h3) - var(--text-h3-min)) / (var(--max-vw) - var(--min-vw))) *
        (100vw - var(--min-vw-px)) + calc(var(--text-h3-min) * 1px)
    ),
    calc(var(--max-fs) * 1px)
  ) !important;
}

.heading4 {
  --max-fs: var(--text-h4);
  --min-fs: var(--text-h4-min);
  font-size: clamp(
    calc(var(--min-fs) * 1px),
    calc(
      ((var(--text-h4) - var(--text-h4-min)) / (var(--max-vw) - var(--min-vw))) *
        (100vw - var(--min-vw-px)) + calc(var(--text-h4-min) * 1px)
    ),
    calc(var(--max-fs) * 1px)
  ) !important;
}

.heading5 {
  --max-fs: var(--text-h5);
  --min-fs: var(--text-h5-min);
  font-size: clamp(
    calc(var(--min-fs) * 1px),
    calc(
      ((var(--text-h5) - var(--text-h5-min)) / (var(--max-vw) - var(--min-vw))) *
        (100vw - var(--min-vw-px)) + calc(var(--text-h5-min) * 1px)
    ),
    calc(var(--max-fs) * 1px)
  ) !important;
}

.heading6 {
  --max-fs: var(--text-h6);
  --min-fs: var(--text-h6-min);
  font-size: clamp(
    calc(var(--min-fs) * 1px),
    calc(
      ((var(--text-h6) - var(--text-h6-min)) / (var(--max-vw) - var(--min-vw))) *
        (100vw - var(--min-vw-px)) + calc(var(--text-h6-min) * 1px)
    ),
    calc(var(--max-fs) * 1px)
  ) !important;
}

.body-lg {
  --max-fs: var(--text-body-lg);
  --min-fs: var(--text-body-lg-min);
  font-size: clamp(
    calc(var(--min-fs) * 1px),
    calc(
      ((var(--text-body-lg) - var(--text-body-lg-min)) / (var(--max-vw) - var(--min-vw))) *
        (100vw - var(--min-vw-px)) + calc(var(--text-body-lg-min) * 1px)
    ),
    calc(var(--max-fs) * 1px)
  ) !important;
}

.body-md {
  --max-fs: var(--text-body-md);
  --min-fs: var(--text-body-md-min);
  font-size: clamp(
    calc(var(--min-fs) * 1px),
    calc(
      ((var(--text-body-md) - var(--text-body-md-min)) / (var(--max-vw) - var(--min-vw))) *
        (100vw - var(--min-vw-px)) + calc(var(--text-body-md-min) * 1px)
    ),
    calc(var(--max-fs) * 1px)
  ) !important;
}

.body-sm {
  --max-fs: var(--text-body-sm);
  --min-fs: var(--text-body-sm-min);
  font-size: clamp(
    calc(var(--min-fs) * 1px),
    calc(
      ((var(--text-body-sm) - var(--text-body-sm-min)) / (var(--max-vw) - var(--min-vw))) *
        (100vw - var(--min-vw-px)) + calc(var(--text-body-sm-min) * 1px)
    ),
    calc(var(--max-fs) * 1px)
  ) !important;
}

.button-text {
  --max-fs: var(--text-button);
  --min-fs: var(--text-button-min);
  font-size: clamp(
    calc(var(--min-fs) * 1px),
    calc(
      ((var(--text-button) - var(--text-button-min)) / (var(--max-vw) - var(--min-vw))) *
        (100vw - var(--min-vw-px)) + calc(var(--text-button-min) * 1px)
    ),
    calc(var(--max-fs) * 1px)
  ) !important;
}