:root {
    --color-primary-600: 84, 86, 90;
    --color-secondary-600: 198, 210, 208;
    --color-body-600: 38, 38, 38;
    --color-tertiary-600: 96, 106, 111;
    --color-quaternary-600: 216, 213, 206;
    --color-quaternary-700: 178, 171, 158;
    --font-family--body: 'Helvetica', sans-serif;
    --font-family--display: 'Helvetica Neue', sans-serif;
    --font-family--handwritten: 'EB Garamond', 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);
        }
    }

    --button-md--primary-pt: var(--spacing-md);
    --button-md--primary-pr: var(--spacing-3xl);
    --button-md--primary-pb: var(--spacing-md);
    --button-md--primary-pl: var(--spacing-3xl);
    --button-md--primary-gap: var(--spacing-none);
    --button-md--primary-border: 1px;
    --button-md--primary-rounded: var(--radius-none);
    --button-md--primary-font-family: var(--font-family--body);
    --button-md--primary-font-weight: 300;
    --button-md--primary-typography-fz: var(--typography-text-md-font-size);
    --button-md--primary-typography-lh: var(--typography-text-md-line-height);
    --button-md--primary-typography-ls: var(--typography-text-md-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: 38px;
        --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(38px * 1.2);
            }

            &[data-line-height='3'] {
                --typography-display-md-line-height: calc(38px * 1.4);
            }

            &[data-line-height='4'] {
                --typography-display-md-line-height: calc(38px * 1.6);
            }

            &[data-line-height='5'] {
                --typography-display-md-line-height: calc(38px * 1.8);
            }

            &[data-line-height='6'] {
                --typography-display-md-line-height: calc(38px * 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: 40px;
        --typography-display-xl-line-height: 70px;
        --typography-display-xl-letter-spacing: 0px;

        body {
            &[data-font-size='2'] {
                --typography-display-xl-font-size: calc(40px * 1.2);
            }

            &[data-font-size='3'] {
                --typography-display-xl-font-size: calc(40px * 1.4);
            }

            &[data-font-size='4'] {
                --typography-display-xl-font-size: calc(40px * 1.6);
            }

            &[data-font-size='5'] {
                --typography-display-xl-font-size: calc(40px * 1.8);
            }

            &[data-font-size='6'] {
                --typography-display-xl-font-size: calc(40px * 2);
            }

            &[data-line-height='2'] {
                --typography-display-xl-line-height: calc(70px * 1.2);
            }

            &[data-line-height='3'] {
                --typography-display-xl-line-height: calc(70px * 1.4);
            }

            &[data-line-height='4'] {
                --typography-display-xl-line-height: calc(70px * 1.6);
            }

            &[data-line-height='5'] {
                --typography-display-xl-line-height: calc(70px * 1.8);
            }

            &[data-line-height='6'] {
                --typography-display-xl-line-height: calc(70px * 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);
            }
        }

    }
}