.font-primary {
  font-family: var(--font-family-primary), sans-serif;
}

.font-secondary {
  font-family: var(--font-family-secondary), sans-serif;
}

.font-tertiary {
  font-family: var(--font-family-tertiary), sans-serif;
}

.fw-100 {
  font-weight: 100;
}

.fw-200 {
  font-weight: 200;
}

.fw-300 {
  font-weight: 300;
}

.fw-400 {
  font-weight: 400;
}

.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

.fw-700 {
  font-weight: 700;
}

.fw-800 {
  font-weight: 800;
}

.fw-900 {
  font-weight: 900;
}

.fw-inherit {
  font-weight: inherit;
}

.fw-initial {
  font-weight: initial;
}

.fs-h1 {
  font-size: var(--font-size-h1);
}

.fs-h2 {
  font-size: var(--font-size-h2);
}

.fs-h3 {
  font-size: var(--font-size-h3);
}

.fs-h4 {
  font-size: var(--font-size-h4);
}

.fs-h5 {
  font-size: var(--font-size-h5);
}

.fs-h6 {
  font-size: var(--font-size-h6);
}

.fs-1 {
  font-size: var(--font-size-xs);
}

.fs-2 {
  font-size: var(--font-size-sm);
}

.fs-3 {
  font-size: var(--font-size-md);
}

.fs-4 {
  font-size: var(--font-size-lg);
}

.fs-5 {
  font-size: var(--font-size-xl);
}

.fs-6 {
  font-size: var(--font-size-xxl);
}

.fs-inherit {
  font-size: inherit;
}

.fs-initial {
  font-size: initial;
}

@media (min-width: 480px) {
  .fw-100-xs {
    font-weight: 100;
  }
  .fw-200-xs {
    font-weight: 200;
  }
  .fw-300-xs {
    font-weight: 300;
  }
  .fw-400-xs {
    font-weight: 400;
  }
  .fw-500-xs {
    font-weight: 500;
  }
  .fw-600-xs {
    font-weight: 600;
  }
  .fw-700-xs {
    font-weight: 700;
  }
  .fw-800-xs {
    font-weight: 800;
  }
  .fw-900-xs {
    font-weight: 900;
  }
  .fw-inherit-xs {
    font-weight: inherit;
  }
  .fw-initial-xs {
    font-weight: initial;
  }
  .fs-h1-xs {
    font-size: var(--font-size-h1);
  }
  .fs-h2-xs {
    font-size: var(--font-size-h2);
  }
  .fs-h3-xs {
    font-size: var(--font-size-h3);
  }
  .fs-h4-xs {
    font-size: var(--font-size-h4);
  }
  .fs-h5-xs {
    font-size: var(--font-size-h5);
  }
  .fs-h6-xs {
    font-size: var(--font-size-h6);
  }
  .fs-1-xs {
    font-size: var(--font-size-xs);
  }
  .fs-2-xs {
    font-size: var(--font-size-sm);
  }
  .fs-3-xs {
    font-size: var(--font-size-md);
  }
  .fs-4-xs {
    font-size: var(--font-size-lg);
  }
  .fs-5-xs {
    font-size: var(--font-size-xl);
  }
  .fs-6-xs {
    font-size: var(--font-size-xxl);
  }
  .fs-inherit-xs {
    font-size: inherit;
  }
  .fs-initial-xs {
    font-size: initial;
  }
}
@media (min-width: 640px) {
  .fw-100-sm {
    font-weight: 100;
  }
  .fw-200-sm {
    font-weight: 200;
  }
  .fw-300-sm {
    font-weight: 300;
  }
  .fw-400-sm {
    font-weight: 400;
  }
  .fw-500-sm {
    font-weight: 500;
  }
  .fw-600-sm {
    font-weight: 600;
  }
  .fw-700-sm {
    font-weight: 700;
  }
  .fw-800-sm {
    font-weight: 800;
  }
  .fw-900-sm {
    font-weight: 900;
  }
  .fw-inherit-sm {
    font-weight: inherit;
  }
  .fw-initial-sm {
    font-weight: initial;
  }
  .fs-h1-sm {
    font-size: var(--font-size-h1);
  }
  .fs-h2-sm {
    font-size: var(--font-size-h2);
  }
  .fs-h3-sm {
    font-size: var(--font-size-h3);
  }
  .fs-h4-sm {
    font-size: var(--font-size-h4);
  }
  .fs-h5-sm {
    font-size: var(--font-size-h5);
  }
  .fs-h6-sm {
    font-size: var(--font-size-h6);
  }
  .fs-1-sm {
    font-size: var(--font-size-xs);
  }
  .fs-2-sm {
    font-size: var(--font-size-sm);
  }
  .fs-3-sm {
    font-size: var(--font-size-md);
  }
  .fs-4-sm {
    font-size: var(--font-size-lg);
  }
  .fs-5-sm {
    font-size: var(--font-size-xl);
  }
  .fs-6-sm {
    font-size: var(--font-size-xxl);
  }
  .fs-inherit-sm {
    font-size: inherit;
  }
  .fs-initial-sm {
    font-size: initial;
  }
}
@media (min-width: 768px) {
  .fw-100-md {
    font-weight: 100;
  }
  .fw-200-md {
    font-weight: 200;
  }
  .fw-300-md {
    font-weight: 300;
  }
  .fw-400-md {
    font-weight: 400;
  }
  .fw-500-md {
    font-weight: 500;
  }
  .fw-600-md {
    font-weight: 600;
  }
  .fw-700-md {
    font-weight: 700;
  }
  .fw-800-md {
    font-weight: 800;
  }
  .fw-900-md {
    font-weight: 900;
  }
  .fw-inherit-md {
    font-weight: inherit;
  }
  .fw-initial-md {
    font-weight: initial;
  }
  .fs-h1-md {
    font-size: var(--font-size-h1);
  }
  .fs-h2-md {
    font-size: var(--font-size-h2);
  }
  .fs-h3-md {
    font-size: var(--font-size-h3);
  }
  .fs-h4-md {
    font-size: var(--font-size-h4);
  }
  .fs-h5-md {
    font-size: var(--font-size-h5);
  }
  .fs-h6-md {
    font-size: var(--font-size-h6);
  }
  .fs-1-md {
    font-size: var(--font-size-xs);
  }
  .fs-2-md {
    font-size: var(--font-size-sm);
  }
  .fs-3-md {
    font-size: var(--font-size-md);
  }
  .fs-4-md {
    font-size: var(--font-size-lg);
  }
  .fs-5-md {
    font-size: var(--font-size-xl);
  }
  .fs-6-md {
    font-size: var(--font-size-xxl);
  }
  .fs-inherit-md {
    font-size: inherit;
  }
  .fs-initial-md {
    font-size: initial;
  }
}
@media (min-width: 1024px) {
  .fw-100-lg {
    font-weight: 100;
  }
  .fw-200-lg {
    font-weight: 200;
  }
  .fw-300-lg {
    font-weight: 300;
  }
  .fw-400-lg {
    font-weight: 400;
  }
  .fw-500-lg {
    font-weight: 500;
  }
  .fw-600-lg {
    font-weight: 600;
  }
  .fw-700-lg {
    font-weight: 700;
  }
  .fw-800-lg {
    font-weight: 800;
  }
  .fw-900-lg {
    font-weight: 900;
  }
  .fw-inherit-lg {
    font-weight: inherit;
  }
  .fw-initial-lg {
    font-weight: initial;
  }
  .fs-h1-lg {
    font-size: var(--font-size-h1);
  }
  .fs-h2-lg {
    font-size: var(--font-size-h2);
  }
  .fs-h3-lg {
    font-size: var(--font-size-h3);
  }
  .fs-h4-lg {
    font-size: var(--font-size-h4);
  }
  .fs-h5-lg {
    font-size: var(--font-size-h5);
  }
  .fs-h6-lg {
    font-size: var(--font-size-h6);
  }
  .fs-1-lg {
    font-size: var(--font-size-xs);
  }
  .fs-2-lg {
    font-size: var(--font-size-sm);
  }
  .fs-3-lg {
    font-size: var(--font-size-md);
  }
  .fs-4-lg {
    font-size: var(--font-size-lg);
  }
  .fs-5-lg {
    font-size: var(--font-size-xl);
  }
  .fs-6-lg {
    font-size: var(--font-size-xxl);
  }
  .fs-inherit-lg {
    font-size: inherit;
  }
  .fs-initial-lg {
    font-size: initial;
  }
}
@media (min-width: 1280px) {
  .fw-100-xl {
    font-weight: 100;
  }
  .fw-200-xl {
    font-weight: 200;
  }
  .fw-300-xl {
    font-weight: 300;
  }
  .fw-400-xl {
    font-weight: 400;
  }
  .fw-500-xl {
    font-weight: 500;
  }
  .fw-600-xl {
    font-weight: 600;
  }
  .fw-700-xl {
    font-weight: 700;
  }
  .fw-800-xl {
    font-weight: 800;
  }
  .fw-900-xl {
    font-weight: 900;
  }
  .fw-inherit-xl {
    font-weight: inherit;
  }
  .fw-initial-xl {
    font-weight: initial;
  }
  .fs-h1-xl {
    font-size: var(--font-size-h1);
  }
  .fs-h2-xl {
    font-size: var(--font-size-h2);
  }
  .fs-h3-xl {
    font-size: var(--font-size-h3);
  }
  .fs-h4-xl {
    font-size: var(--font-size-h4);
  }
  .fs-h5-xl {
    font-size: var(--font-size-h5);
  }
  .fs-h6-xl {
    font-size: var(--font-size-h6);
  }
  .fs-1-xl {
    font-size: var(--font-size-xs);
  }
  .fs-2-xl {
    font-size: var(--font-size-sm);
  }
  .fs-3-xl {
    font-size: var(--font-size-md);
  }
  .fs-4-xl {
    font-size: var(--font-size-lg);
  }
  .fs-5-xl {
    font-size: var(--font-size-xl);
  }
  .fs-6-xl {
    font-size: var(--font-size-xxl);
  }
  .fs-inherit-xl {
    font-size: inherit;
  }
  .fs-initial-xl {
    font-size: initial;
  }
}
@media (min-width: 1536px) {
  .fw-100-xxl {
    font-weight: 100;
  }
  .fw-200-xxl {
    font-weight: 200;
  }
  .fw-300-xxl {
    font-weight: 300;
  }
  .fw-400-xxl {
    font-weight: 400;
  }
  .fw-500-xxl {
    font-weight: 500;
  }
  .fw-600-xxl {
    font-weight: 600;
  }
  .fw-700-xxl {
    font-weight: 700;
  }
  .fw-800-xxl {
    font-weight: 800;
  }
  .fw-900-xxl {
    font-weight: 900;
  }
  .fw-inherit-xxl {
    font-weight: inherit;
  }
  .fw-initial-xxl {
    font-weight: initial;
  }
  .fs-h1-xxl {
    font-size: var(--font-size-h1);
  }
  .fs-h2-xxl {
    font-size: var(--font-size-h2);
  }
  .fs-h3-xxl {
    font-size: var(--font-size-h3);
  }
  .fs-h4-xxl {
    font-size: var(--font-size-h4);
  }
  .fs-h5-xxl {
    font-size: var(--font-size-h5);
  }
  .fs-h6-xxl {
    font-size: var(--font-size-h6);
  }
  .fs-1-xxl {
    font-size: var(--font-size-xs);
  }
  .fs-2-xxl {
    font-size: var(--font-size-sm);
  }
  .fs-3-xxl {
    font-size: var(--font-size-md);
  }
  .fs-4-xxl {
    font-size: var(--font-size-lg);
  }
  .fs-5-xxl {
    font-size: var(--font-size-xl);
  }
  .fs-6-xxl {
    font-size: var(--font-size-xxl);
  }
  .fs-inherit-xxl {
    font-size: inherit;
  }
  .fs-initial-xxl {
    font-size: initial;
  }
}