:root {
/* TEXT SIZE SCALE */
/* https://www.fluid-type-scale.com/calculate?minFontSize=20&minWidth=320&minRatio=1.125&maxFontSize=22&maxWidth=1680&maxRatio=1.2&steps=xs%2Cs%2Cm%2Cl%2Cxl&baseStep=m&prefix=text&decimals=2&useRems=on&remValue=16&previewFont=Ysabeau+Infant&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1680 */
--text-xs: clamp(1.42rem, -0.02vw + 1.43rem, 1.39rem);
--text-s: clamp(1.6rem, 0.05vw + 1.58rem, 1.67rem);
--text-m: clamp(1.8rem, 0.15vw + 1.75rem, 2rem);
--text-l: clamp(2.02rem, 0.28vw + 1.94rem, 2.4rem);
--text-xl: clamp(2.28rem, 0.44vw + 2.14rem, 2.88rem);


/* HEADING SIZE SCALE */
/* https://www.fluid-type-scale.com/calculate?minFontSize=20&minWidth=320&minRatio=1.25&maxFontSize=52&maxWidth=1680&maxRatio=1.333&steps=6%2C5%2C4%2C3%2C2%2C1%2Ctitle&baseStep=4&prefix=h&decimals=2&useRems=on&remValue=16&previewFont=Ysabeau+Infant&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1680 */
--h4: clamp(2rem, 2.06vw + 1.34rem, 4.8rem);
--h3: clamp(2.5rem, 2.4vw + 1.73rem, 5.76rem);
--h2: clamp(3.13rem, 2.78vw + 2.23rem, 6.91rem);
--h1: clamp(3.91rem, 3.23vw + 2.87rem, 8.29rem);
--h-title: clamp(4.88rem, 3.73vw + 3.69rem, 9.95rem);

/* OTHER SIZE UTILITY CLASSES */
--section-block-padding: clamp(8rem, 5.714vw + 6.171rem, 16rem);
--section-inline-padding: clamp(1.5rem, 0.735vw + 1.265rem, 2.5rem);
--radius: 4rem;
--row-gap: clamp(4rem, 1.471vw + 3.529rem, 6rem);
--block-padding:6rem;
--big-text: clamp(3.2rem, 1.176vw + 2.824rem, 4.8rem);
--hero-content-padding: clamp(1.5rem, 0.735vw + 1.265rem, 2.5rem);
}


/* TEXT SIZE UTILITY CLASSES */
.text-xl {
    font-size: var(--text-xl);
    line-height: 1.4;
}
.text-l {
    font-size: var(--text-l);
    line-height: 1.5;
}
body, .text-m {
    font-size: var(--text-m);
    line-height: 1.5;
}
.text-s {
    font-size: var(--text-s);
    line-height: 1.6;
}
.text-xs {
    font-size: var(--text-xs);
    line-height: 1.7;
}


/* HEADING SIZE UTILITY CLASSES */
.h-title {
    font-size: var(--h-title);
    line-height: 1;
    padding-bottom: 3rem;
}
h1, .h1 {
    font-size: var(--h1);
    line-height: 1;
    padding-bottom: 3rem;
}
h2, .h2 {
    font-size: var(--h2);
    line-height: 1;
    padding-bottom: 2rem;
}
h3, .h3 {
    font-size: var(--h3);
    line-height: 1;
    padding-bottom: 1.6rem;
}
h4, .h4 {
    font-size: var(--h4);
    line-height: 1;
    padding-bottom: 1.4rem;
}