:root {
  --ui-kit-text-font-size: 14px;
  --ui-kit-text-line-height: 16px;
  --ui-kit-h1-font-size: 42px;
  --ui-kit-h2-font-size: 16px;
  --ui-kit-h3-font-size: 14px;
  --ui-kit-h5-font-size: 13px;
  --ui-kit-h5-line-height: 18px;
  --ui-kit-title-footer-font-size: 20px;
  --ui-kit-special-h-font-size: 36px;

  @media (width < 960px) {
    --ui-kit-h1-font-size: 36px;
    --ui-kit-special-h-font-size: 20px;
  }
  @media (width < 480px) {
    --ui-kit-h1-font-size: 26px;
    --ui-kit-h5-font-size: 11px;
    --ui-kit-h5-line-height: 15px;
  }
}

.ui-kit-text, p.ui-kit-text {
  font: 400 var(--ui-kit-text-font-size) / var(--ui-kit-text-line-height) Arial, sans-serif;
  letter-spacing: calc(-0.04 * var(--ui-kit-text-font-size));
  color: var(--c-ui-kit-text);

  p, span {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
  }
}
.ui-kit-h1, h1.ui-kit-h1 {
  font: 700 var(--ui-kit-h1-font-size) / 39px Roboto, Arial, sans-serif;
  letter-spacing: calc(-0.02 * var(--ui-kit-h1-font-size));
  color: var(--c-ui-kit-text);

  @media (width < 960px) {
    line-height: 35px;
    letter-spacing: calc(-0.03 * var(--ui-kit-h1-font-size));
  }
  @media (width < 480px) {
    line-height: 26px;
  }
}
h1.ui-kit-h1 {
  padding: 0;
  position: static;
  border-bottom: none;

  &::after {
    content: none;
  }
}
.ui-kit-h2, h2.ui-kit-h2 {
  font: 700 var(--ui-kit-h2-font-size) / 19px Roboto, Arial, sans-serif;
  letter-spacing: calc(-0.02 * var(--ui-kit-h2-font-size));
  color: var(--c-ui-kit-text);
}
.ui-kit-h3, h3.ui-kit-h3 {
  font: 600 var(--ui-kit-h3-font-size) / 16px Roboto, Arial, sans-serif;
  letter-spacing: calc(-0.02 * var(--ui-kit-h3-font-size));
  color: var(--c-ui-kit-text);
}
.ui-kit-h5, h5.ui-kit-h5 {
  font: 400 var(--ui-kit-h5-font-size) / var(--ui-kit-h5-line-height) Roboto, Arial, sans-serif;
  letter-spacing: 0;
  color: var(--c-ui-kit-text);
}
.ui-kit-title-footer {
  font: 700 var(--ui-kit-title-footer-font-size) / 23px Arial, sans-serif;
  letter-spacing: calc(-0.02 * var(--ui-kit-title-footer-font-size));
  color: var(--c-ui-kit-text);
}
.ui-kit-special-h, h2.ui-kit-special-h {
  font: 600 var(--ui-kit-special-h-font-size) / 32px Roboto, Arial, sans-serif;
  letter-spacing: 0;
  color: var(--c-ui-kit-text);
}