:root { --body-vw: 18vw; --body-px: 18px; --text-l-vw: 20vw; --text-l-px: 20px; --text-m-vw: 16vw; --text-m-px: 16px; --text-s-vw: 14vw; --text-s-px: 14px; --xxl-vw: 64vw; --xxl-px: 64px; --xl-vw: 56vw; --xl-px: 56px; --l-vw: 42vw; --l-px: 42px; --m-vw: 36vw; --m-px: 36px; --s-vw: 24vw; --s-px: 24px; --xs-vw: 20vw; --xs-px: 20px; } @media only screen and (min-width: 1440px) { body { font-size: calc((var(--body-vw)) / 1440 * 100); } .text-l { font-size: calc((var(--text-l-vw)) / 1440 * 100); } .text-m { font-size: calc((var(--text-m-vw)) / 1440 * 100); } .text-s { font-size: calc((var(--text-s-vw)) / 1440 * 100); } h1, .headline.xxl { font-size: calc((var(--xxl-vw)) / 1440 * 100); } h2, .headline.xl { font-size: calc((var(--xl-vw)) / 1440 * 100); } h3, .headline.l { font-size: calc((var(--l-vw)) / 1440 * 100); } h4, .headline.m { font-size: calc((var(--m-vw)) / 1440 * 100); } h5, .headline.s { font-size: calc((var(--s-vw)) / 1440 * 100); } h6, .headline.xs { font-size: calc((var(--xs-vw)) / 1440 * 100); } } @media only screen and (min-width: 1920px) { body { font-size: calc((var(--body-px)) * 1.3333); } .text-l { font-size: calc((var(--text-l-px)) * 1.3333); } .text-m { font-size: calc((var(--text-m-px)) * 1.3333); } .text-s { font-size: calc((var(--text-s-px)) * 1.3333); } h1, .headline.xxl { font-size: calc((var(--xxl-px)) * 1.3333); } h2, .headline.xl { font-size: calc((var(--xl-px)) * 1.3333); } h3, .headline.l { font-size: calc((var(--l-px)) * 1.3333); } h4, .headline.m { font-size: calc((var(--m-px)) * 1.3333); } h5, .headline.s { font-size: calc((var(--s-px)) * 1.3333); } h6, .headline.xs { font-size: calc((var(--xs-px)) * 1.3333); } }