body {
  font-family: "Inter", Helvetica, sans-serif;
  color: var(--color-grey);
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Inter", Helvetica, sans-serif;
    letter-spacing: -1%;
}

:where(h1, h2, h3, h4, h5, h6) {
    color: var(--color-ultra-dark-blue);
}

h1, .h1-styled {
  font-weight: 700;
  font-size: 4.4rem;
  line-height: 1.15;
}

h2, .h2-styled {
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 1.15;
}

h3, .h3-styled {
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1.15;
}

h4, .h4-styled {
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.2;
}

h5, .h5-styled {
  font-weight: 600;
  font-size: 1.8rem;
  line-height: 1.15;
}

h6, .h6-styled {
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.15;
}

p {
  font-family: "Inter", Helvetica, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.375;
}

p.large {
  font-size: 1.8rem;
  line-height: 1.5;
}

p.small {
  font-size: 1.4rem;
  line-height: 1.5;
}

@media (min-width: 768px) {
  h1, .h1-styled {
    font-size: 5.6rem;
  }

  h2, .h2-styled {
    font-size: 4rem;
  }
}