:root {
  --type-scale: 1.2;
  --type-root: 1.6;
  --type-root-max: 1.9;

  --text-xs-min: calc(var(--text-sm-min) / var(--type-scale));
  --text-sm-min: calc(var(--text-base-min) / var(--type-scale));
  --text-base-min: calc(var(--type-root) * 1rem);
  --text-lg-min: calc(var(--text-base-min) * var(--type-scale));
  --text-xl-min: calc(var(--text-lg-min) * var(--type-scale));
  --text-2xl-min: calc(var(--text-xl-min) * var(--type-scale));
  --text-3xl-min: calc(var(--text-2xl-min) * var(--type-scale));
  --text-4xl-min: calc(var(--text-3xl-min) * var(--type-scale));
  --text-5xl-min: calc(var(--text-4xl-min) * var(--type-scale));
  --text-6xl-min: calc(var(--text-5xl-min) * var(--type-scale));
  --text-7xl-min: calc(var(--text-6xl-min) * var(--type-scale));
  --text-8xl-min: calc(var(--text-7xl-min) * var(--type-scale));
  --text-9xl-min: calc(var(--text-8xl-min) * var(--type-scale));
  --text-hero-min: var(--text-5xl-min);
  --text-image-title-min: var(--text-4xl-min);
  --text-alert-min: var(--text-5xl-min);

  --text-xs-max: calc(var(--text-sm-max) / var(--type-scale));
  --text-sm-max: calc(var(--text-base-max) / var(--type-scale));
  --text-base-max: calc(var(--type-root-max) * 1rem);
  --text-lg-max: calc(var(--text-base-max) * var(--type-scale));
  --text-xl-max: calc(var(--text-lg-max) * var(--type-scale));
  --text-2xl-max: calc(var(--text-xl-max) * var(--type-scale));
  --text-3xl-max: calc(var(--text-2xl-max) * var(--type-scale));
  --text-4xl-max: calc(var(--text-3xl-max) * var(--type-scale));
  --text-5xl-max: calc(var(--text-4xl-max) * var(--type-scale));
  --text-6xl-max: calc(var(--text-5xl-max) * var(--type-scale));
  --text-7xl-max: calc(var(--text-6xl-max) * var(--type-scale));
  --text-8xl-max: calc(var(--text-7xl-max) * var(--type-scale));
  --text-9xl-max: calc(var(--text-8xl-max) * var(--type-scale));
  --text-hero-max: var(--text-7xl-max);
  --text-image-title-max: var(--text-8xl-max);
  --text-alert-max: var(--text-7xl-max);

  --text-xs: clamp(
      var(--text-xs-min),
      calc(var(--type-scale) / var(--type-scale) / var(--type-scale) * 1vw),
      var(--text-sm-max)
  );
  --text-sm: clamp(
      var(--text-sm-min),
      calc(var(--type-scale) / var(--type-scale) * 1vw),
      var(--text-sm-max)
  );
  --text-base: clamp(
      var(--text-base-min),
      calc(var(--type-scale) * 1vw),
      var(--text-base-max)
  );
  --text-lg: clamp(
      var(--text-lg-min),
      calc(var(--type-scale) * var(--type-scale) * 1vw),
      var(--text-lg-max)
  );
  --text-xl: clamp(
      var(--text-xl-min),
      calc(var(--type-scale) * var(--type-scale) * var(--type-scale) * 1vw),
      var(--text-xl-max)
  );
  --text-2xl: clamp(
      var(--text-2xl-min),
      calc(var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * 1vw),
      var(--text-2xl-max)
  );
  --text-3xl: clamp(
      var(--text-3xl-min),
      calc(var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * 1vw),
      var(--text-3xl-max)
  );
  --text-4xl: clamp(
      var(--text-4xl-min),
      calc(var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * 1vw),
      var(--text-4xl-max)
  );
  --text-5xl: clamp(
      var(--text-5xl-min),
      calc(var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * 1vw),
      var(--text-5xl-max)
  );
  --text-6xl: clamp(
      var(--text-6xl-min),
      calc(var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * 1vw),
      var(--text-6xl-max)
  );
  --text-7xl: clamp(
      var(--text-7xl-min),
      calc(var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * 1vw),
      var(--text-7xl-max)
  );
  --text-8xl: clamp(
      var(--text-8xl-min),
      calc(var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * 1vw),
      var(--text-8xl-max)
  );
  --text-9xl: clamp(
      var(--text-9xl-min),
      calc(var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * 1vw),
      var(--text-9xl-max)
  );
  --text-hero: clamp(
      var(--text-hero-min),
      calc(var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * 1vw),
      var(--text-hero-max)
  );
  --text-hero-small: clamp(
      var(--text-3xl-min),
      calc(var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * 1vw), 
      var(--text-5xl-max)
  );
  --text-image-title: clamp(
      var(--text-image-title-min),
      calc(var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * 1vw),
      var(--text-image-title-max)
  );
  --text-alert: clamp(
      var(--text-alert-min),
      calc(var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * 1vw),
      var(--text-alert-max)
  );

  /** Responsive Margins */
  --margin-2xs: calc(var(--margin-md) / 2.5);
  --margin-xs: calc(var(--margin-md) / 2);
  --margin-sm: calc(var(--margin-md) / 1.5);

  --margin-md: calc((var(--type-scale) * 1rem) + (var(--type-scale) * 1vw));
  --margin-lg: calc(var(--margin-md) * 1.5);
  --margin-xl: calc(var(--margin-md) * 2);
  --margin-2xl: calc(var(--margin-md) * 2.5);
  --margin-3xl: calc(var(--margin-md) * 3);
  --margin-4xl: calc(var(--margin-md) * 3.5);
  --margin-5xl: calc(var(--margin-md) * 4);

  /** Widths */
  --w-measure: 65ch;
}

.w-text-base {
    width: var(--text-base);
}

.w-1\/2 {
    width: 50%;
}

.w-full {
    width: 100%;
}

.w-sm {
    width: var(--margin-sm);
}

.h-text-base {
    height: var(--text-base);
}

.h-none {
    height: 0;
}

.h-full {
    height: 100%;
}

.h-sm {
    height: var(--margin-sm);
}

.min-h-half {
    min-height: 50vh;
}

.min-h-full {
    min-height: 100vh;
}

.p-0 {
    padding: 0;
}

.p-2xs {
    padding: var(--margin-2xs);
}

.p-sm {
    padding: var(--margin-sm);
}

.p-md {
    padding: var(--margin-md);
}

.p-lg {
    padding: var(--margin-lg);
}

.pt-xs {
    padding-top: var(--margin-xs);
}

.pt-sm,
.first\:pt-sm:first-child {
    padding-top: var(--margin-sm);
}

.pt-md {
    padding-top: var(--margin-md);
}

.pb-xs {
    padding-bottom: var(--margin-xs);
}

.pb-sm {
    padding-bottom: var(--margin-sm);
}

.pb-md {
    padding-bottom: var(--margin-md);
}

.pb-lg {
    padding-bottom: var(--margin-lg);
}

.pb-xl {
    padding-bottom: var(--margin-xl);
}

.pb-3xl {
    padding-bottom: var(--margin-3xl);
}

.last\:pb-none:last-child {
    padding-bottom: 0;
}

.px-2xs {
    padding-left: var(--margin-2xs);
    padding-right: var(--margin-2xs);
}

.px-xs {
    padding-left: var(--margin-xs);
    padding-right: var(--margin-xs);
}

.px-sm {
    padding-left: var(--margin-sm);
    padding-right: var(--margin-sm);
}

.px-md {
    padding-left: var(--margin-md);
    padding-right: var(--margin-md);
}

.px-lg {
    padding-left: var(--margin-lg);
    padding-right: var(--margin-lg);
}

.px-xl {
    padding-left: var(--margin-xl);
    padding-right: var(--margin-xl);
}

.py-2 {
    padding-top: 2px;
    padding-bottom: 2px;
}

.py-2xs {
    padding-top: var(--margin-2xs);
    padding-bottom: var(--margin-2xs);
}

.py-xs {
    padding-top: var(--margin-xs);
    padding-bottom: var(--margin-xs);
}

.py-sm {
    padding-top: var(--margin-sm);
    padding-bottom: var(--margin-sm);
}

.py-md {
    padding-top: var(--margin-md);
    padding-bottom: var(--margin-md);
}

.py-lg {
    padding-top: var(--margin-lg);
    padding-bottom: var(--margin-lg);
}

.py-xl {
    padding-top: var(--margin-xl);
    padding-bottom: var(--margin-xl);
}

.pl-sm {
    padding-left: var(--margin-sm);
}

.space-x-xs > :not([hidden]) + :not([hidden]) {
    margin-left: var(--margin-xs);
}

.space-x-sm > :not([hidden]) + :not([hidden]) {
    margin-left: var(--margin-sm);
}

.space-y-sm > :not([hidden]) + :not([hidden]) {
    margin-top: var(--margin-sm);
}

.space-y-md > :not([hidden]) + :not([hidden]) {
    margin-top: var(--margin-md);
}

.space-y-lg > :not([hidden]) + :not([hidden]) {
    margin-top: var(--margin-lg);
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.mx-md {
    margin-left: var(--margin-md);
    margin-right: var(--margin-md);
}

.mx-xl {
    margin-left: var(--margin-xl);
    margin-right: var(--margin-xl);
}

.my-sm {
    margin-top: var(--margin-sm);
    margin-bottom: var(--margin-sm);
}

.my-md {
    margin-top: var(--margin-md);
    margin-bottom: var(--margin-md);
}

.my-lg {
    margin-top: var(--margin-lg);
    margin-bottom: var(--margin-lg);
}

.mt-auto {
    margin-top: auto;
}

.mt-2xs {
    margin-top: var(--margin-2xs);
}

.mt-xs {
    margin-top: var(--margin-xs);
}

.mt-sm {
    margin-top: var(--margin-sm);
}

.mt-md {
    margin-top: var(--margin-md);
}

.mt-lg {
    margin-top: var(--margin-lg);
}

.mt-xl {
    margin-top: var(--margin-xl);
}

.-mt-2xl {
    margin-top: calc(-1 * var(--margin-2xl));
}

.first\:mt-sm:first-child {
    margin-top: var(--margin-sm);
}

.mb-2xs {
    margin-bottom: var(--margin-2xs);
}

.mb-xs {
    margin-bottom: var(--margin-xs);
}

.mb-sm {
    margin-bottom: var(--margin-sm);
}

.mb-md {
    margin-bottom: var(--margin-md);
}

.mb-lg {
    margin-bottom: var(--margin-lg);
}

.mb-xl {
    margin-bottom: var(--margin-xl);
}

.mr-xs {
    margin-right: var(--margin-xs);
}

.mr-sm {
    margin-right: var(--margin-sm);
}

.mr-md {
    margin-right: var(--margin-md);
}

.ml-auto {
    margin-left: auto;
}

.ml-2xs {
    margin-left: var(--margin-2xs);
}

.ml-none {
    margin-left: 0;
}


@media (min-width: 48em) {
    .md\:ml-auto {
        margin-left: auto;
    }

    .md\:space-x-auto > :not([hidden]) + :not([hidden]) {
        margin-left: auto;
    }
}

@media (min-width: 64em) {
    .lg\:ml-auto {
        margin-left: auto;
    }

    .lg\:space-x-auto > :not([hidden]) + :not([hidden]) {
        margin-left: auto;
    }
}