: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);
}
}
Container
This is some text inside of a div block.
List
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.