:root { --body-font-size: 18px; --sb-font: 16px; --lb-font: calc(var(--body-font-size) * 1.05); --h1-font: calc(var(--body-font-size) * 3.33); --h2-font: calc(var(--body-font-size) * 1.94); --h3-font: calc(var(--body-font-size) * 1.56); --h4-font: calc(var(--body-font-size) * 1.39); --h5-font: calc(var(--body-font-size) * 1.11); --h6-font: calc(var(--body-font-size) * 1); }
@media (max-width: 1024px) {
  :root { --body-font-size: 16px; --sb-font: 14px; --h1-font: calc(var(--body-font-size) * 3); --h2-font: calc(var(--body-font-size) * 1.8); --h3-font: calc(var(--body-font-size) * 1.5); --h4-font: calc(var(--body-font-size) * 1.3); --h5-font: calc(var(--body-font-size) * 1.1); --h6-font: var(--body-font-size); }
}
@media (max-width: 767px) {
  :root { --body-font-size: 14px; --sb-font: 13px; --h1-font: calc(var(--body-font-size) * 2.7); --h2-font: calc(var(--body-font-size) * 1.7); --h3-font: calc(var(--body-font-size) * 1.4); --h4-font: calc(var(--body-font-size) * 1.2); --h5-font: calc(var(--body-font-size) * 1); --h6-font: calc(var(--body-font-size) * 0.94); }
}
@media (max-width: 478px) {
  :root { --body-font-size: 14px; --sb-font: 13px; --h1-font: calc(var(--body-font-size) * 2.5); --h2-font: calc(var(--body-font-size) * 1.5); --h3-font: calc(var(--body-font-size) * 1.2); --h4-font: calc(var(--body-font-size) * 1.1); --h5-font: calc(var(--body-font-size) * 1); --h6-font: var(--body-font-size); }
}