/* ===== COMPONENT TYPE SCALE ===== */
:root {
  --an-type-h1: clamp(2.3rem, 1.8rem + 2vw, 3.75rem);
  --an-type-h2: clamp(1.9rem, 1.5rem + 1.1vw, 2.5rem);
  --an-type-display-4: clamp(2.2rem, 1.7rem + 1.6vw, 3.15rem);
  --an-type-display-5: clamp(1.9rem, 1.45rem + 1.1vw, 2.6rem);
  --an-type-display-6: clamp(1.45rem, 1.2rem + 0.7vw, 1.9rem);
  --an-type-lead: clamp(1.03rem, 0.98rem + 0.35vw, 1.18rem);
}

h1,
.h1,
h1.display-1,
h1.display-2,
h1.display-3,
h1.display-4,
h1.display-5,
h1.display-6 {
  font-size: var(--an-type-h1) !important;
  line-height: 1.12 !important;
}

h2,
.h2,
h2.display-1,
h2.display-2,
h2.display-3,
h2.display-4,
h2.display-5,
h2.display-6 {
  font-size: var(--an-type-h2) !important;
  line-height: 1.18 !important;
}

.display-4 {
  font-size: var(--an-type-display-4) !important;
  line-height: 1.15 !important;
}

.display-5 {
  font-size: var(--an-type-display-5) !important;
  line-height: 1.18 !important;
}

.display-6 {
  font-size: var(--an-type-display-6) !important;
  line-height: 1.22 !important;
}

.lead {
  font-size: var(--an-type-lead) !important;
  line-height: 1.6 !important;
}

@media (min-width: 1200px) {
  h1,
  .h1,
  h1.display-1,
  h1.display-2,
  h1.display-3,
  h1.display-4,
  h1.display-5,
  h1.display-6 {
    font-size: 60px !important;
  }

  h2,
  .h2,
  h2.display-1,
  h2.display-2,
  h2.display-3,
  h2.display-4,
  h2.display-5,
  h2.display-6 {
    font-size: 40px !important;
  }
}