:root {

    /* H1 */
    --h1-xxl: 8.2rem;
    --h1-xl: 7.2rem;
    --h1-l: 8.2rem;
    --h1-m: 5.2rem;
    --h1-s: 4.2rem;
    --h1-weight: 500;
    --h1-letter-spacing: -0.01em;
    --h1-line-height: 1.2em;

    /* h2 */
    --h2-xxl: 4.2rem;
    --h2-xl: 3.8rem;
    --h2-l: 4.2rem;
    --h2-m: 2.8rem;
    --h2-s: 2.8rem;
    --h2-weight: 700;
    --h2-letter-spacing: -0.01em;
    --h2-line-height: 1.2em;

    /* H3 */
    --h3-xxl: 3.2rem;
    --h3-xl: 2.8rem;
    --h3-l: 3.2rem;
    --h3-m: 2.4rem;
    --h3-s: 2.4rem;
    --h3-weight: 600;
    --h3-letter-spacing: 0.0em;
    --h3-line-height: 1.2em;

    /* h4 */
    --h4-xxl: 2.4rem;
    --h4-xl: 2.4rem;
    --h4-l: 2.4rem;
    --h4-m: 1.8rem;
    --h4-s: 1.8rem;
    --h4-weight: 500;
    --h4-letter-spacing: 0.0em;
    --h4-line-height: 1.2em;

    /* h5 */
    --h5-xxl: 1.8rem;
    --h5-xl: 1.8rem;
    --h5-l: 1.8rem;
    --h5-m: 1.6rem;
    --h5-s: 1.6rem;
    --h5-weight: 500;
    --h5-letter-spacing: 0.0em;
    --h5-line-height: 1.2em;

    /* h6 */
    --h6-xxl: 1.6rem;
    --h6-xl: 1.6rem;
    --h6-l: 1.6rem;
    --h6-m: 1.6rem;
    --h6-s: 1.6rem;
    --h6-weight: 500;
    --h6-letter-spacing: 0.0em;
    --h6-line-height: 1.2em;

    /* Body */
    --body-xxl: 1.6rem;
    --body-xl: 1.6rem;
    --body-l: 1.6rem;
    --body-m: 1.6rem;
    --body-s: 1.6rem;
    --body-weight: 500;
    --body-letter-spacing: 0.0em;
    --body-line-height: 1.8em;

    /* Body XS*/
    --body-xs-xxl: 1.2rem;
    --body-xs-xl: 1.2rem;
    --body-xs-l: 1.2rem;
    --body-xs-m: 1.2rem;
    --body-xs-s: 1.2rem;
    --body-xs-weight: 500;
    --body-xs-letter-spacing: 0.0em;
    --body-xs-line-height: 1.8em;
        
    /* Set Desktop Values */
    --text-xxl: var(--h1-xxl);
    --text-xl: var(--h2-xxl);
    --text-l: var(--h3-xxl);
    --text-m: var(--h4-xxl);
    --text-s: var(--h5-xxl);
    --text-xs: var(--h6-xxl);
    --body: var(--body-xxl);
    --body-xs: var(--body-xs-xxl);
}

html {
    font-size: 62.5%;
}

h1,
.bc--h1 {
    font-size: var(--text-xxl);
    font-weight: var(--h1-weight);
    line-height: var(--h1-line-height);
    letter-spacing: var(--h1-letter-spacing);
}

h2,
.bc--h2 {
    font-size: var(--text-xl);
    font-weight: var(--h2-weight);
    line-height: var(--h2-line-height);
    letter-spacing: var(--h2-letter-spacing);
}

h3,
.bc--h3 {
    font-size: var(--text-l);
    font-weight: var(--h3-weight);
    line-height: var(--h3-line-height);
    letter-spacing: var(--h3-letter-spacing);
}

h4,
.bc--h4 {
    font-size: var(--text-m);
    font-weight: var(--h4-weight);
    line-height: var(--h4-line-height);
    letter-spacing: var(--h4-letter-spacing);
}

h5,
.bc--h5 {
    font-size: var(--text-s);
    font-weight: var(--h5-weight);
    line-height: var(--h5-line-height);
    letter-spacing: var(--h5-letter-spacing);
}

h6,
.bc--h6 {
    font-size: var(--text-xs);
    font-weight: var(--h6-weight);
    line-height: var(--h6-line-height);
    letter-spacing: var(--h6-letter-spacing);
}

body:not(#ct-controller-ui) {
    font-size: var(--body);
    font-weight: var(--body-weight);
    line-height: var(--body-line-height);
    letter-spacing: var(--body-letter-spacing);
}

.bc--body-xs {
    font-size: var(--body-xs);
    font-weight: var(--body-xs-weight);
    line-height: var(--body-xs-line-height);
    letter-spacing: var(--body-xs-letter-spacing);
}

@media screen and ( max-width: 1120px) {
    :root {
        --text-xxl: var(--h1-xl);
        --text-xl: var(--h2-xl);
        --text-l: var(--h3-xl);
        --text-m: var(--h4-xl);
        --text-s: var(--h5-xl);
        --text-xs: var(--h6-xl);
        --body: var(--body-xl);
        --body-xs: var(--body-xs-xl);
    }
}

@media screen and ( max-width: 991px) {
    :root {
        --text-xxl: var(--h1-l);
        --text-xl: var(--h2-l);
        --text-l: var(--h3-l);
        --text-m: var(--h4-l);
        --text-s: var(--h5-l);
        --text-xs: var(--h6-l);
        --body: var(--body-l);
        --body-xs: var(--body-xs-l);
    }
}

@media screen and ( max-width: 767px) {
    :root {
        --text-xxl: var(--h1-m);
        --text-xl: var(--h2-m);
        --text-l: var(--h3-m);
        --text-m: var(--h4-m);
        --text-s: var(--h5-m);
        --text-xs: var(--h6-m);
        --body: var(--body-m);
        --body-xs: var(--body-xs-m);
    }
}

@media screen and ( max-width: 478px ) {
    :root {
        --text-xxl: var(--h1-s);
        --text-xl: var(--h2-s);
        --text-l: var(--h3-s);
        --text-m: var(--h4-s);
        --text-s: var(--h5-s);
        --text-xs: var(--h6-s);
        --body: var(--body-s);
        --body-xs: var(--body-xs-s);
    }
}