:root {
  --qn-font-body: Inter, Arial, sans-serif;
  --qn-font-heading: "Space Grotesk", Inter, sans-serif;
  --qn-type-body-size: 16px;
  --qn-type-body-line: 1.5;
  --qn-type-body-weight: 400;
  --qn-type-body-lg-size: 19px;
  --qn-type-body-lg-line: 1.55;
  --qn-type-body-lg-weight: 500;
  --qn-type-h1-size: 54px;
  --qn-type-h1-line: 1.08;
  --qn-type-h1-weight: 800;
  --qn-type-h2-size: 28px;
  --qn-type-h2-line: 1.15;
  --qn-type-h2-weight: 700;
  --qn-type-h3-size: 20px;
  --qn-type-h3-line: 1.2;
  --qn-type-h3-weight: 700;
  --qn-type-label-size: 14px;
  --qn-type-label-line: 1.4;
  --qn-type-label-weight: 500;
  --qn-type-kicker-size: 12px;
  --qn-type-kicker-line: 1.2;
  --qn-type-kicker-weight: 800;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--qn-font-body);
  font-size: var(--qn-type-body-size);
  font-weight: var(--qn-type-body-weight);
  line-height: var(--qn-type-body-line);
}

h1,
h2,
h3,
.font-heading {
  font-family: var(--qn-font-heading);
  letter-spacing: 0;
}

h1,
h2,
h3,
p {
  overflow-wrap: break-word;
}

svg {
  max-width: 100%;
}

@media (max-width: 820px) {
  :root {
    --qn-type-h1-size: 42px;
    --qn-type-body-lg-size: 16px;
  }
}

@media (max-width: 560px) {
  :root {
    --qn-type-h1-size: 38px;
  }
}