:root {
--color-primary-600: 255, 196, 38;
--color-primary-700: 255, 186, 0;
--color-body-500: 245, 245, 245;
--color-body-600: 217, 217, 217;
--color-body-700: 21, 21, 21;
--font-family--display:'Trade Gothic LT Std', sans-serif;
--font-family--body:'Heebo', sans-serif;
--font-family--handwritten:'Pathé Palace', sans-serif;
--typography-text-xs-font-size: 12px; 
 --typography-text-xs-line-height: 18px; 
 --typography-text-xs-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-text-xs-font-size: calc(12px * 1.2);
}
&[data-font-size='3']{
--typography-text-xs-font-size: calc(12px * 1.4); 
}
&[data-font-size='4']{
--typography-text-xs-font-size: calc(12px * 1.6); 
}
&[data-font-size='5']{
--typography-text-xs-font-size: calc(12px * 1.8); 
}
&[data-font-size='6']{
--typography-text-xs-font-size: calc(12px * 2); 
}
&[data-line-height='2']{
--typography-text-xs-line-height: calc(18px * 1.2);
}
&[data-line-height='3']{
--typography-text-xs-line-height: calc(18px * 1.4); 
}
&[data-line-height='4']{
--typography-text-xs-line-height: calc(18px * 1.6); 
}
&[data-line-height='5']{
--typography-text-xs-line-height: calc(18px * 1.8); 
}
&[data-line-height='6']{
--typography-text-xs-line-height: calc(18px * 2); 
}
}

--typography-text-sm-font-size: 14px; 
 --typography-text-sm-line-height: 20px; 
 --typography-text-sm-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-text-sm-font-size: calc(14px * 1.2);
}
&[data-font-size='3']{
--typography-text-sm-font-size: calc(14px * 1.4); 
}
&[data-font-size='4']{
--typography-text-sm-font-size: calc(14px * 1.6); 
}
&[data-font-size='5']{
--typography-text-sm-font-size: calc(14px * 1.8); 
}
&[data-font-size='6']{
--typography-text-sm-font-size: calc(14px * 2); 
}
&[data-line-height='2']{
--typography-text-sm-line-height: calc(20px * 1.2);
}
&[data-line-height='3']{
--typography-text-sm-line-height: calc(20px * 1.4); 
}
&[data-line-height='4']{
--typography-text-sm-line-height: calc(20px * 1.6); 
}
&[data-line-height='5']{
--typography-text-sm-line-height: calc(20px * 1.8); 
}
&[data-line-height='6']{
--typography-text-sm-line-height: calc(20px * 2); 
}
}

--typography-text-md-font-size: 16px; 
 --typography-text-md-line-height: 24px; 
 --typography-text-md-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-text-md-font-size: calc(16px * 1.2);
}
&[data-font-size='3']{
--typography-text-md-font-size: calc(16px * 1.4); 
}
&[data-font-size='4']{
--typography-text-md-font-size: calc(16px * 1.6); 
}
&[data-font-size='5']{
--typography-text-md-font-size: calc(16px * 1.8); 
}
&[data-font-size='6']{
--typography-text-md-font-size: calc(16px * 2); 
}
&[data-line-height='2']{
--typography-text-md-line-height: calc(24px * 1.2);
}
&[data-line-height='3']{
--typography-text-md-line-height: calc(24px * 1.4); 
}
&[data-line-height='4']{
--typography-text-md-line-height: calc(24px * 1.6); 
}
&[data-line-height='5']{
--typography-text-md-line-height: calc(24px * 1.8); 
}
&[data-line-height='6']{
--typography-text-md-line-height: calc(24px * 2); 
}
}

--typography-text-lg-font-size: 18px; 
 --typography-text-lg-line-height: 28px; 
 --typography-text-lg-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-text-lg-font-size: calc(18px * 1.2);
}
&[data-font-size='3']{
--typography-text-lg-font-size: calc(18px * 1.4); 
}
&[data-font-size='4']{
--typography-text-lg-font-size: calc(18px * 1.6); 
}
&[data-font-size='5']{
--typography-text-lg-font-size: calc(18px * 1.8); 
}
&[data-font-size='6']{
--typography-text-lg-font-size: calc(18px * 2); 
}
&[data-line-height='2']{
--typography-text-lg-line-height: calc(28px * 1.2);
}
&[data-line-height='3']{
--typography-text-lg-line-height: calc(28px * 1.4); 
}
&[data-line-height='4']{
--typography-text-lg-line-height: calc(28px * 1.6); 
}
&[data-line-height='5']{
--typography-text-lg-line-height: calc(28px * 1.8); 
}
&[data-line-height='6']{
--typography-text-lg-line-height: calc(28px * 2); 
}
}

--typography-text-xl-font-size: 20px; 
 --typography-text-xl-line-height: 30px; 
 --typography-text-xl-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-text-xl-font-size: calc(20px * 1.2);
}
&[data-font-size='3']{
--typography-text-xl-font-size: calc(20px * 1.4); 
}
&[data-font-size='4']{
--typography-text-xl-font-size: calc(20px * 1.6); 
}
&[data-font-size='5']{
--typography-text-xl-font-size: calc(20px * 1.8); 
}
&[data-font-size='6']{
--typography-text-xl-font-size: calc(20px * 2); 
}
&[data-line-height='2']{
--typography-text-xl-line-height: calc(30px * 1.2);
}
&[data-line-height='3']{
--typography-text-xl-line-height: calc(30px * 1.4); 
}
&[data-line-height='4']{
--typography-text-xl-line-height: calc(30px * 1.6); 
}
&[data-line-height='5']{
--typography-text-xl-line-height: calc(30px * 1.8); 
}
&[data-line-height='6']{
--typography-text-xl-line-height: calc(30px * 2); 
}
}

--typography-display-xs-font-size: 24px; 
 --typography-display-xs-line-height: 32px; 
 --typography-display-xs-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-display-xs-font-size: calc(24px * 1.2);
}
&[data-font-size='3']{
--typography-display-xs-font-size: calc(24px * 1.4); 
}
&[data-font-size='4']{
--typography-display-xs-font-size: calc(24px * 1.6); 
}
&[data-font-size='5']{
--typography-display-xs-font-size: calc(24px * 1.8); 
}
&[data-font-size='6']{
--typography-display-xs-font-size: calc(24px * 2); 
}
&[data-line-height='2']{
--typography-display-xs-line-height: calc(32px * 1.2);
}
&[data-line-height='3']{
--typography-display-xs-line-height: calc(32px * 1.4); 
}
&[data-line-height='4']{
--typography-display-xs-line-height: calc(32px * 1.6); 
}
&[data-line-height='5']{
--typography-display-xs-line-height: calc(32px * 1.8); 
}
&[data-line-height='6']{
--typography-display-xs-line-height: calc(32px * 2); 
}
}

--typography-display-sm-font-size: 30px; 
 --typography-display-sm-line-height: 38px; 
 --typography-display-sm-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-display-sm-font-size: calc(30px * 1.2);
}
&[data-font-size='3']{
--typography-display-sm-font-size: calc(30px * 1.4); 
}
&[data-font-size='4']{
--typography-display-sm-font-size: calc(30px * 1.6); 
}
&[data-font-size='5']{
--typography-display-sm-font-size: calc(30px * 1.8); 
}
&[data-font-size='6']{
--typography-display-sm-font-size: calc(30px * 2); 
}
&[data-line-height='2']{
--typography-display-sm-line-height: calc(38px * 1.2);
}
&[data-line-height='3']{
--typography-display-sm-line-height: calc(38px * 1.4); 
}
&[data-line-height='4']{
--typography-display-sm-line-height: calc(38px * 1.6); 
}
&[data-line-height='5']{
--typography-display-sm-line-height: calc(38px * 1.8); 
}
&[data-line-height='6']{
--typography-display-sm-line-height: calc(38px * 2); 
}
}

--typography-display-md-font-size: 36px; 
 --typography-display-md-line-height: 44px; 
 --typography-display-md-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-display-md-font-size: calc(36px * 1.2);
}
&[data-font-size='3']{
--typography-display-md-font-size: calc(36px * 1.4); 
}
&[data-font-size='4']{
--typography-display-md-font-size: calc(36px * 1.6); 
}
&[data-font-size='5']{
--typography-display-md-font-size: calc(36px * 1.8); 
}
&[data-font-size='6']{
--typography-display-md-font-size: calc(36px * 2); 
}
&[data-line-height='2']{
--typography-display-md-line-height: calc(44px * 1.2);
}
&[data-line-height='3']{
--typography-display-md-line-height: calc(44px * 1.4); 
}
&[data-line-height='4']{
--typography-display-md-line-height: calc(44px * 1.6); 
}
&[data-line-height='5']{
--typography-display-md-line-height: calc(44px * 1.8); 
}
&[data-line-height='6']{
--typography-display-md-line-height: calc(44px * 2); 
}
}

--typography-display-lg-font-size: 48px; 
 --typography-display-lg-line-height: 60px; 
 --typography-display-lg-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-display-lg-font-size: calc(48px * 1.2);
}
&[data-font-size='3']{
--typography-display-lg-font-size: calc(48px * 1.4); 
}
&[data-font-size='4']{
--typography-display-lg-font-size: calc(48px * 1.6); 
}
&[data-font-size='5']{
--typography-display-lg-font-size: calc(48px * 1.8); 
}
&[data-font-size='6']{
--typography-display-lg-font-size: calc(48px * 2); 
}
&[data-line-height='2']{
--typography-display-lg-line-height: calc(60px * 1.2);
}
&[data-line-height='3']{
--typography-display-lg-line-height: calc(60px * 1.4); 
}
&[data-line-height='4']{
--typography-display-lg-line-height: calc(60px * 1.6); 
}
&[data-line-height='5']{
--typography-display-lg-line-height: calc(60px * 1.8); 
}
&[data-line-height='6']{
--typography-display-lg-line-height: calc(60px * 2); 
}
}

--typography-display-xl-font-size: 60px; 
 --typography-display-xl-line-height: 72px; 
 --typography-display-xl-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-display-xl-font-size: calc(60px * 1.2);
}
&[data-font-size='3']{
--typography-display-xl-font-size: calc(60px * 1.4); 
}
&[data-font-size='4']{
--typography-display-xl-font-size: calc(60px * 1.6); 
}
&[data-font-size='5']{
--typography-display-xl-font-size: calc(60px * 1.8); 
}
&[data-font-size='6']{
--typography-display-xl-font-size: calc(60px * 2); 
}
&[data-line-height='2']{
--typography-display-xl-line-height: calc(72px * 1.2);
}
&[data-line-height='3']{
--typography-display-xl-line-height: calc(72px * 1.4); 
}
&[data-line-height='4']{
--typography-display-xl-line-height: calc(72px * 1.6); 
}
&[data-line-height='5']{
--typography-display-xl-line-height: calc(72px * 1.8); 
}
&[data-line-height='6']{
--typography-display-xl-line-height: calc(72px * 2); 
}
}

--typography-display-2xl-font-size: 72px; 
 --typography-display-2xl-line-height: 90px; 
 --typography-display-2xl-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-display-2xl-font-size: calc(72px * 1.2);
}
&[data-font-size='3']{
--typography-display-2xl-font-size: calc(72px * 1.4); 
}
&[data-font-size='4']{
--typography-display-2xl-font-size: calc(72px * 1.6); 
}
&[data-font-size='5']{
--typography-display-2xl-font-size: calc(72px * 1.8); 
}
&[data-font-size='6']{
--typography-display-2xl-font-size: calc(72px * 2); 
}
&[data-line-height='2']{
--typography-display-2xl-line-height: calc(90px * 1.2);
}
&[data-line-height='3']{
--typography-display-2xl-line-height: calc(90px * 1.4); 
}
&[data-line-height='4']{
--typography-display-2xl-line-height: calc(90px * 1.6); 
}
&[data-line-height='5']{
--typography-display-2xl-line-height: calc(90px * 1.8); 
}
&[data-line-height='6']{
--typography-display-2xl-line-height: calc(90px * 2); 
}
}

--shadow-md: 0px 10px 20px 0px rgba(var(--color-black), 0.2);
--button-md--primary-pt: var(--spacing-none); 
--button-md--primary-pr: var(--spacing-5xl); 
--button-md--primary-pb: var(--spacing-none); 
--button-md--primary-pl: var(--spacing-5xl); 
--button-md--primary-gap: var(--spacing-lg); 
--button-md--primary-border: 0px; 
--button-md--primary-rounded: var(--radius-full); 
--button-md--primary-font-family: var(--font-family--display); 
--button-md--primary-font-weight: 600; 
--button-md--primary-typography-fz: var(--typography-text-lg-font-size); 
--button-md--primary-typography-lh: var(--typography-text-lg-line-height); 
--button-md--primary-typography-ls: var(--typography-text-lg-letter-spacing); 
--button-md--primary-shadow: var(--shadow-md);

--button-lg--primary-pt: var(--spacing-none); 
--button-lg--primary-pr: var(--spacing-3xl); 
--button-lg--primary-pb: var(--spacing-none); 
--button-lg--primary-pl: var(--spacing-3xl); 
--button-lg--primary-gap: var(--spacing-lg); 
--button-lg--primary-border: 0px; 
--button-lg--primary-rounded: var(--radius-lg); 
--button-lg--primary-font-family: var(--font-family--display); 
--button-lg--primary-font-weight: 600; 
--button-lg--primary-typography-fz: var(--typography-text-lg-font-size); 
--button-lg--primary-typography-lh: var(--typography-text-lg-line-height); 
--button-lg--primary-typography-ls: var(--typography-text-lg-letter-spacing); 

}
@media screen and (max-width: 1280px) and (min-width: 745px) {
:root {
--typography-text-xs-font-size: 12px; 
 --typography-text-xs-line-height: 18px; 
 --typography-text-xs-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-text-xs-font-size: calc(12px * 1.2);
}
&[data-font-size='3']{
--typography-text-xs-font-size: calc(12px * 1.4); 
}
&[data-font-size='4']{
--typography-text-xs-font-size: calc(12px * 1.6); 
}
&[data-font-size='5']{
--typography-text-xs-font-size: calc(12px * 1.8); 
}
&[data-font-size='6']{
--typography-text-xs-font-size: calc(12px * 2); 
}
&[data-line-height='2']{
--typography-text-xs-line-height: calc(18px * 1.2);
}
&[data-line-height='3']{
--typography-text-xs-line-height: calc(18px * 1.4); 
}
&[data-line-height='4']{
--typography-text-xs-line-height: calc(18px * 1.6); 
}
&[data-line-height='5']{
--typography-text-xs-line-height: calc(18px * 1.8); 
}
&[data-line-height='6']{
--typography-text-xs-line-height: calc(18px * 2); 
}
}

--typography-text-sm-font-size: 14px; 
 --typography-text-sm-line-height: 20px; 
 --typography-text-sm-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-text-sm-font-size: calc(14px * 1.2);
}
&[data-font-size='3']{
--typography-text-sm-font-size: calc(14px * 1.4); 
}
&[data-font-size='4']{
--typography-text-sm-font-size: calc(14px * 1.6); 
}
&[data-font-size='5']{
--typography-text-sm-font-size: calc(14px * 1.8); 
}
&[data-font-size='6']{
--typography-text-sm-font-size: calc(14px * 2); 
}
&[data-line-height='2']{
--typography-text-sm-line-height: calc(20px * 1.2);
}
&[data-line-height='3']{
--typography-text-sm-line-height: calc(20px * 1.4); 
}
&[data-line-height='4']{
--typography-text-sm-line-height: calc(20px * 1.6); 
}
&[data-line-height='5']{
--typography-text-sm-line-height: calc(20px * 1.8); 
}
&[data-line-height='6']{
--typography-text-sm-line-height: calc(20px * 2); 
}
}

--typography-text-md-font-size: 16px; 
 --typography-text-md-line-height: 24px; 
 --typography-text-md-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-text-md-font-size: calc(16px * 1.2);
}
&[data-font-size='3']{
--typography-text-md-font-size: calc(16px * 1.4); 
}
&[data-font-size='4']{
--typography-text-md-font-size: calc(16px * 1.6); 
}
&[data-font-size='5']{
--typography-text-md-font-size: calc(16px * 1.8); 
}
&[data-font-size='6']{
--typography-text-md-font-size: calc(16px * 2); 
}
&[data-line-height='2']{
--typography-text-md-line-height: calc(24px * 1.2);
}
&[data-line-height='3']{
--typography-text-md-line-height: calc(24px * 1.4); 
}
&[data-line-height='4']{
--typography-text-md-line-height: calc(24px * 1.6); 
}
&[data-line-height='5']{
--typography-text-md-line-height: calc(24px * 1.8); 
}
&[data-line-height='6']{
--typography-text-md-line-height: calc(24px * 2); 
}
}

--typography-text-lg-font-size: 18px; 
 --typography-text-lg-line-height: 28px; 
 --typography-text-lg-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-text-lg-font-size: calc(18px * 1.2);
}
&[data-font-size='3']{
--typography-text-lg-font-size: calc(18px * 1.4); 
}
&[data-font-size='4']{
--typography-text-lg-font-size: calc(18px * 1.6); 
}
&[data-font-size='5']{
--typography-text-lg-font-size: calc(18px * 1.8); 
}
&[data-font-size='6']{
--typography-text-lg-font-size: calc(18px * 2); 
}
&[data-line-height='2']{
--typography-text-lg-line-height: calc(28px * 1.2);
}
&[data-line-height='3']{
--typography-text-lg-line-height: calc(28px * 1.4); 
}
&[data-line-height='4']{
--typography-text-lg-line-height: calc(28px * 1.6); 
}
&[data-line-height='5']{
--typography-text-lg-line-height: calc(28px * 1.8); 
}
&[data-line-height='6']{
--typography-text-lg-line-height: calc(28px * 2); 
}
}

--typography-text-xl-font-size: 20px; 
 --typography-text-xl-line-height: 30px; 
 --typography-text-xl-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-text-xl-font-size: calc(20px * 1.2);
}
&[data-font-size='3']{
--typography-text-xl-font-size: calc(20px * 1.4); 
}
&[data-font-size='4']{
--typography-text-xl-font-size: calc(20px * 1.6); 
}
&[data-font-size='5']{
--typography-text-xl-font-size: calc(20px * 1.8); 
}
&[data-font-size='6']{
--typography-text-xl-font-size: calc(20px * 2); 
}
&[data-line-height='2']{
--typography-text-xl-line-height: calc(30px * 1.2);
}
&[data-line-height='3']{
--typography-text-xl-line-height: calc(30px * 1.4); 
}
&[data-line-height='4']{
--typography-text-xl-line-height: calc(30px * 1.6); 
}
&[data-line-height='5']{
--typography-text-xl-line-height: calc(30px * 1.8); 
}
&[data-line-height='6']{
--typography-text-xl-line-height: calc(30px * 2); 
}
}

--typography-display-xs-font-size: 24px; 
 --typography-display-xs-line-height: 32px; 
 --typography-display-xs-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-display-xs-font-size: calc(24px * 1.2);
}
&[data-font-size='3']{
--typography-display-xs-font-size: calc(24px * 1.4); 
}
&[data-font-size='4']{
--typography-display-xs-font-size: calc(24px * 1.6); 
}
&[data-font-size='5']{
--typography-display-xs-font-size: calc(24px * 1.8); 
}
&[data-font-size='6']{
--typography-display-xs-font-size: calc(24px * 2); 
}
&[data-line-height='2']{
--typography-display-xs-line-height: calc(32px * 1.2);
}
&[data-line-height='3']{
--typography-display-xs-line-height: calc(32px * 1.4); 
}
&[data-line-height='4']{
--typography-display-xs-line-height: calc(32px * 1.6); 
}
&[data-line-height='5']{
--typography-display-xs-line-height: calc(32px * 1.8); 
}
&[data-line-height='6']{
--typography-display-xs-line-height: calc(32px * 2); 
}
}

--typography-display-sm-font-size: 28px; 
 --typography-display-sm-line-height: 36px; 
 --typography-display-sm-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-display-sm-font-size: calc(28px * 1.2);
}
&[data-font-size='3']{
--typography-display-sm-font-size: calc(28px * 1.4); 
}
&[data-font-size='4']{
--typography-display-sm-font-size: calc(28px * 1.6); 
}
&[data-font-size='5']{
--typography-display-sm-font-size: calc(28px * 1.8); 
}
&[data-font-size='6']{
--typography-display-sm-font-size: calc(28px * 2); 
}
&[data-line-height='2']{
--typography-display-sm-line-height: calc(36px * 1.2);
}
&[data-line-height='3']{
--typography-display-sm-line-height: calc(36px * 1.4); 
}
&[data-line-height='4']{
--typography-display-sm-line-height: calc(36px * 1.6); 
}
&[data-line-height='5']{
--typography-display-sm-line-height: calc(36px * 1.8); 
}
&[data-line-height='6']{
--typography-display-sm-line-height: calc(36px * 2); 
}
}

--typography-display-md-font-size: 34px; 
 --typography-display-md-line-height: 44px; 
 --typography-display-md-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-display-md-font-size: calc(34px * 1.2);
}
&[data-font-size='3']{
--typography-display-md-font-size: calc(34px * 1.4); 
}
&[data-font-size='4']{
--typography-display-md-font-size: calc(34px * 1.6); 
}
&[data-font-size='5']{
--typography-display-md-font-size: calc(34px * 1.8); 
}
&[data-font-size='6']{
--typography-display-md-font-size: calc(34px * 2); 
}
&[data-line-height='2']{
--typography-display-md-line-height: calc(44px * 1.2);
}
&[data-line-height='3']{
--typography-display-md-line-height: calc(44px * 1.4); 
}
&[data-line-height='4']{
--typography-display-md-line-height: calc(44px * 1.6); 
}
&[data-line-height='5']{
--typography-display-md-line-height: calc(44px * 1.8); 
}
&[data-line-height='6']{
--typography-display-md-line-height: calc(44px * 2); 
}
}

--typography-display-lg-font-size: 42px; 
 --typography-display-lg-line-height: 52px; 
 --typography-display-lg-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-display-lg-font-size: calc(42px * 1.2);
}
&[data-font-size='3']{
--typography-display-lg-font-size: calc(42px * 1.4); 
}
&[data-font-size='4']{
--typography-display-lg-font-size: calc(42px * 1.6); 
}
&[data-font-size='5']{
--typography-display-lg-font-size: calc(42px * 1.8); 
}
&[data-font-size='6']{
--typography-display-lg-font-size: calc(42px * 2); 
}
&[data-line-height='2']{
--typography-display-lg-line-height: calc(52px * 1.2);
}
&[data-line-height='3']{
--typography-display-lg-line-height: calc(52px * 1.4); 
}
&[data-line-height='4']{
--typography-display-lg-line-height: calc(52px * 1.6); 
}
&[data-line-height='5']{
--typography-display-lg-line-height: calc(52px * 1.8); 
}
&[data-line-height='6']{
--typography-display-lg-line-height: calc(52px * 2); 
}
}

--typography-display-xl-font-size: 50px; 
 --typography-display-xl-line-height: 62px; 
 --typography-display-xl-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-display-xl-font-size: calc(50px * 1.2);
}
&[data-font-size='3']{
--typography-display-xl-font-size: calc(50px * 1.4); 
}
&[data-font-size='4']{
--typography-display-xl-font-size: calc(50px * 1.6); 
}
&[data-font-size='5']{
--typography-display-xl-font-size: calc(50px * 1.8); 
}
&[data-font-size='6']{
--typography-display-xl-font-size: calc(50px * 2); 
}
&[data-line-height='2']{
--typography-display-xl-line-height: calc(62px * 1.2);
}
&[data-line-height='3']{
--typography-display-xl-line-height: calc(62px * 1.4); 
}
&[data-line-height='4']{
--typography-display-xl-line-height: calc(62px * 1.6); 
}
&[data-line-height='5']{
--typography-display-xl-line-height: calc(62px * 1.8); 
}
&[data-line-height='6']{
--typography-display-xl-line-height: calc(62px * 2); 
}
}

--typography-display-2xl-font-size: 62px; 
 --typography-display-2xl-line-height: 70px; 
 --typography-display-2xl-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-display-2xl-font-size: calc(62px * 1.2);
}
&[data-font-size='3']{
--typography-display-2xl-font-size: calc(62px * 1.4); 
}
&[data-font-size='4']{
--typography-display-2xl-font-size: calc(62px * 1.6); 
}
&[data-font-size='5']{
--typography-display-2xl-font-size: calc(62px * 1.8); 
}
&[data-font-size='6']{
--typography-display-2xl-font-size: calc(62px * 2); 
}
&[data-line-height='2']{
--typography-display-2xl-line-height: calc(70px * 1.2);
}
&[data-line-height='3']{
--typography-display-2xl-line-height: calc(70px * 1.4); 
}
&[data-line-height='4']{
--typography-display-2xl-line-height: calc(70px * 1.6); 
}
&[data-line-height='5']{
--typography-display-2xl-line-height: calc(70px * 1.8); 
}
&[data-line-height='6']{
--typography-display-2xl-line-height: calc(70px * 2); 
}
}

}
}
@media screen and (max-width: 744px) {
:root {
--typography-text-xs-font-size: 10px; 
 --typography-text-xs-line-height: 16px; 
 --typography-text-xs-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-text-xs-font-size: calc(10px * 1.2);
}
&[data-font-size='3']{
--typography-text-xs-font-size: calc(10px * 1.4); 
}
&[data-font-size='4']{
--typography-text-xs-font-size: calc(10px * 1.6); 
}
&[data-font-size='5']{
--typography-text-xs-font-size: calc(10px * 1.8); 
}
&[data-font-size='6']{
--typography-text-xs-font-size: calc(10px * 2); 
}
&[data-line-height='2']{
--typography-text-xs-line-height: calc(16px * 1.2);
}
&[data-line-height='3']{
--typography-text-xs-line-height: calc(16px * 1.4); 
}
&[data-line-height='4']{
--typography-text-xs-line-height: calc(16px * 1.6); 
}
&[data-line-height='5']{
--typography-text-xs-line-height: calc(16px * 1.8); 
}
&[data-line-height='6']{
--typography-text-xs-line-height: calc(16px * 2); 
}
}

--typography-text-sm-font-size: 12px; 
 --typography-text-sm-line-height: 18px; 
 --typography-text-sm-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-text-sm-font-size: calc(12px * 1.2);
}
&[data-font-size='3']{
--typography-text-sm-font-size: calc(12px * 1.4); 
}
&[data-font-size='4']{
--typography-text-sm-font-size: calc(12px * 1.6); 
}
&[data-font-size='5']{
--typography-text-sm-font-size: calc(12px * 1.8); 
}
&[data-font-size='6']{
--typography-text-sm-font-size: calc(12px * 2); 
}
&[data-line-height='2']{
--typography-text-sm-line-height: calc(18px * 1.2);
}
&[data-line-height='3']{
--typography-text-sm-line-height: calc(18px * 1.4); 
}
&[data-line-height='4']{
--typography-text-sm-line-height: calc(18px * 1.6); 
}
&[data-line-height='5']{
--typography-text-sm-line-height: calc(18px * 1.8); 
}
&[data-line-height='6']{
--typography-text-sm-line-height: calc(18px * 2); 
}
}

--typography-text-md-font-size: 14px; 
 --typography-text-md-line-height: 20px; 
 --typography-text-md-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-text-md-font-size: calc(14px * 1.2);
}
&[data-font-size='3']{
--typography-text-md-font-size: calc(14px * 1.4); 
}
&[data-font-size='4']{
--typography-text-md-font-size: calc(14px * 1.6); 
}
&[data-font-size='5']{
--typography-text-md-font-size: calc(14px * 1.8); 
}
&[data-font-size='6']{
--typography-text-md-font-size: calc(14px * 2); 
}
&[data-line-height='2']{
--typography-text-md-line-height: calc(20px * 1.2);
}
&[data-line-height='3']{
--typography-text-md-line-height: calc(20px * 1.4); 
}
&[data-line-height='4']{
--typography-text-md-line-height: calc(20px * 1.6); 
}
&[data-line-height='5']{
--typography-text-md-line-height: calc(20px * 1.8); 
}
&[data-line-height='6']{
--typography-text-md-line-height: calc(20px * 2); 
}
}

--typography-text-lg-font-size: 16px; 
 --typography-text-lg-line-height: 22px; 
 --typography-text-lg-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-text-lg-font-size: calc(16px * 1.2);
}
&[data-font-size='3']{
--typography-text-lg-font-size: calc(16px * 1.4); 
}
&[data-font-size='4']{
--typography-text-lg-font-size: calc(16px * 1.6); 
}
&[data-font-size='5']{
--typography-text-lg-font-size: calc(16px * 1.8); 
}
&[data-font-size='6']{
--typography-text-lg-font-size: calc(16px * 2); 
}
&[data-line-height='2']{
--typography-text-lg-line-height: calc(22px * 1.2);
}
&[data-line-height='3']{
--typography-text-lg-line-height: calc(22px * 1.4); 
}
&[data-line-height='4']{
--typography-text-lg-line-height: calc(22px * 1.6); 
}
&[data-line-height='5']{
--typography-text-lg-line-height: calc(22px * 1.8); 
}
&[data-line-height='6']{
--typography-text-lg-line-height: calc(22px * 2); 
}
}

--typography-text-xl-font-size: 18px; 
 --typography-text-xl-line-height: 26px; 
 --typography-text-xl-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-text-xl-font-size: calc(18px * 1.2);
}
&[data-font-size='3']{
--typography-text-xl-font-size: calc(18px * 1.4); 
}
&[data-font-size='4']{
--typography-text-xl-font-size: calc(18px * 1.6); 
}
&[data-font-size='5']{
--typography-text-xl-font-size: calc(18px * 1.8); 
}
&[data-font-size='6']{
--typography-text-xl-font-size: calc(18px * 2); 
}
&[data-line-height='2']{
--typography-text-xl-line-height: calc(26px * 1.2);
}
&[data-line-height='3']{
--typography-text-xl-line-height: calc(26px * 1.4); 
}
&[data-line-height='4']{
--typography-text-xl-line-height: calc(26px * 1.6); 
}
&[data-line-height='5']{
--typography-text-xl-line-height: calc(26px * 1.8); 
}
&[data-line-height='6']{
--typography-text-xl-line-height: calc(26px * 2); 
}
}

--typography-display-xs-font-size: 20px; 
 --typography-display-xs-line-height: 30px; 
 --typography-display-xs-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-display-xs-font-size: calc(20px * 1.2);
}
&[data-font-size='3']{
--typography-display-xs-font-size: calc(20px * 1.4); 
}
&[data-font-size='4']{
--typography-display-xs-font-size: calc(20px * 1.6); 
}
&[data-font-size='5']{
--typography-display-xs-font-size: calc(20px * 1.8); 
}
&[data-font-size='6']{
--typography-display-xs-font-size: calc(20px * 2); 
}
&[data-line-height='2']{
--typography-display-xs-line-height: calc(30px * 1.2);
}
&[data-line-height='3']{
--typography-display-xs-line-height: calc(30px * 1.4); 
}
&[data-line-height='4']{
--typography-display-xs-line-height: calc(30px * 1.6); 
}
&[data-line-height='5']{
--typography-display-xs-line-height: calc(30px * 1.8); 
}
&[data-line-height='6']{
--typography-display-xs-line-height: calc(30px * 2); 
}
}

--typography-display-sm-font-size: 24px; 
 --typography-display-sm-line-height: 34px; 
 --typography-display-sm-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-display-sm-font-size: calc(24px * 1.2);
}
&[data-font-size='3']{
--typography-display-sm-font-size: calc(24px * 1.4); 
}
&[data-font-size='4']{
--typography-display-sm-font-size: calc(24px * 1.6); 
}
&[data-font-size='5']{
--typography-display-sm-font-size: calc(24px * 1.8); 
}
&[data-font-size='6']{
--typography-display-sm-font-size: calc(24px * 2); 
}
&[data-line-height='2']{
--typography-display-sm-line-height: calc(34px * 1.2);
}
&[data-line-height='3']{
--typography-display-sm-line-height: calc(34px * 1.4); 
}
&[data-line-height='4']{
--typography-display-sm-line-height: calc(34px * 1.6); 
}
&[data-line-height='5']{
--typography-display-sm-line-height: calc(34px * 1.8); 
}
&[data-line-height='6']{
--typography-display-sm-line-height: calc(34px * 2); 
}
}

--typography-display-md-font-size: 28px; 
 --typography-display-md-line-height: 34px; 
 --typography-display-md-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-display-md-font-size: calc(28px * 1.2);
}
&[data-font-size='3']{
--typography-display-md-font-size: calc(28px * 1.4); 
}
&[data-font-size='4']{
--typography-display-md-font-size: calc(28px * 1.6); 
}
&[data-font-size='5']{
--typography-display-md-font-size: calc(28px * 1.8); 
}
&[data-font-size='6']{
--typography-display-md-font-size: calc(28px * 2); 
}
&[data-line-height='2']{
--typography-display-md-line-height: calc(34px * 1.2);
}
&[data-line-height='3']{
--typography-display-md-line-height: calc(34px * 1.4); 
}
&[data-line-height='4']{
--typography-display-md-line-height: calc(34px * 1.6); 
}
&[data-line-height='5']{
--typography-display-md-line-height: calc(34px * 1.8); 
}
&[data-line-height='6']{
--typography-display-md-line-height: calc(34px * 2); 
}
}

--typography-display-lg-font-size: 36px; 
 --typography-display-lg-line-height: 44px; 
 --typography-display-lg-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-display-lg-font-size: calc(36px * 1.2);
}
&[data-font-size='3']{
--typography-display-lg-font-size: calc(36px * 1.4); 
}
&[data-font-size='4']{
--typography-display-lg-font-size: calc(36px * 1.6); 
}
&[data-font-size='5']{
--typography-display-lg-font-size: calc(36px * 1.8); 
}
&[data-font-size='6']{
--typography-display-lg-font-size: calc(36px * 2); 
}
&[data-line-height='2']{
--typography-display-lg-line-height: calc(44px * 1.2);
}
&[data-line-height='3']{
--typography-display-lg-line-height: calc(44px * 1.4); 
}
&[data-line-height='4']{
--typography-display-lg-line-height: calc(44px * 1.6); 
}
&[data-line-height='5']{
--typography-display-lg-line-height: calc(44px * 1.8); 
}
&[data-line-height='6']{
--typography-display-lg-line-height: calc(44px * 2); 
}
}

--typography-display-xl-font-size: 38px; 
 --typography-display-xl-line-height: 44px; 
 --typography-display-xl-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-display-xl-font-size: calc(38px * 1.2);
}
&[data-font-size='3']{
--typography-display-xl-font-size: calc(38px * 1.4); 
}
&[data-font-size='4']{
--typography-display-xl-font-size: calc(38px * 1.6); 
}
&[data-font-size='5']{
--typography-display-xl-font-size: calc(38px * 1.8); 
}
&[data-font-size='6']{
--typography-display-xl-font-size: calc(38px * 2); 
}
&[data-line-height='2']{
--typography-display-xl-line-height: calc(44px * 1.2);
}
&[data-line-height='3']{
--typography-display-xl-line-height: calc(44px * 1.4); 
}
&[data-line-height='4']{
--typography-display-xl-line-height: calc(44px * 1.6); 
}
&[data-line-height='5']{
--typography-display-xl-line-height: calc(44px * 1.8); 
}
&[data-line-height='6']{
--typography-display-xl-line-height: calc(44px * 2); 
}
}

--typography-display-2xl-font-size: 48px; 
 --typography-display-2xl-line-height: 60px; 
 --typography-display-2xl-letter-spacing: 0px;
body{
&[data-font-size='2']{
--typography-display-2xl-font-size: calc(48px * 1.2);
}
&[data-font-size='3']{
--typography-display-2xl-font-size: calc(48px * 1.4); 
}
&[data-font-size='4']{
--typography-display-2xl-font-size: calc(48px * 1.6); 
}
&[data-font-size='5']{
--typography-display-2xl-font-size: calc(48px * 1.8); 
}
&[data-font-size='6']{
--typography-display-2xl-font-size: calc(48px * 2); 
}
&[data-line-height='2']{
--typography-display-2xl-line-height: calc(60px * 1.2);
}
&[data-line-height='3']{
--typography-display-2xl-line-height: calc(60px * 1.4); 
}
&[data-line-height='4']{
--typography-display-2xl-line-height: calc(60px * 1.6); 
}
&[data-line-height='5']{
--typography-display-2xl-line-height: calc(60px * 1.8); 
}
&[data-line-height='6']{
--typography-display-2xl-line-height: calc(60px * 2); 
}
}

}
}