
.ce-header {
    --font-size: var(--root-font-size); /* Reset, use REM */
}

.ce-header .banner__content {
    --color-background: var(--root-color--primary);
    --border-radius: 0.5rem;
    --box-shadow: 0 0.25rem 1rem 0 rgba(0, 0, 0, 0.16);
}

.ce-header__header {
    --font-family: var(--root-heading-1-family);
    --font-size: var(--root-heading-1-size);
    --font-style: var(--root-heading-1-style);
    --font-weight: var(--root-heading-1-weight);
    --line-height: var(--root-heading-1-line-height);
    --color: var(--root-color--white);
}

.ce-header__text {
    --font-family: inherit;
    --font-size: var(--root-heading-3-size);
    --font-style: normal;
    --font-weight: var(--root-font-weight--normal);
    --color: var(--root-color--white);
}


.ce-header.section--color-primary .banner__content {
    /*--color-background: var(--root-color--white);*/
}

.ce-header.section--color-primary .ce-header__header {
    /*--color: var(--root-color-text);*/
}

.ce-header.section--color-primary .ce-header__text {
    /*--color: var(--root-color-text);*/
}

.ce-header.section--color-secondary .banner__content {
    /*--color-background: var(--root-color--white);*/
}

.ce-header.section--color-secondary .ce-header__header {
    /*--color: var(--root-color-text);*/
}

.ce-header.section--color-secondary .ce-header__text {
    /*--color: var(--root-color-text);*/
}

.ce-header.section--color-support .banner__content {
    /*--color-background: var(--root-color--white);*/
}

.ce-header.section--color-support .ce-header__header {
    /*--color: var(--root-color-text);*/
}

.ce-header.section--color-support .ce-header__text {
    /*--color: var(--root-color-text);*/
}

.ce-header.section--color-grey .banner__content {
    /*--color-background: var(--root-color--white);*/
}

.ce-header.section--color-grey .ce-header__header {
    /*--color: var(--root-color-text);*/
}

.ce-header.section--color-grey .ce-header__text {
    /*--color: var(--root-color-text);*/
}


.ce-header {
    font-size: var(--font-size, 1rem); /* Reset, use REM */
}

.ce-header .banner__content {
    background-color: var(--color-background, white);
}

.ce-header__header {
    font-family: var(--font-family, inherit);
    font-size: var(--font-size, 1.777em);
    font-style: var(--font-style, normal);
    font-weight: var(--font-weight, normal);
    color: var(--color, black);
    line-height: var(--line-height, 1.25);
}

.ce-header__text {
    font-family: var(--font-family, inherit);
    font-size: var(--font-size, 1.166em);
    font-style: var(--font-style, normal);
    font-weight: var(--font-weight, normal);
    color: var(--color, black);
}

@media (min-width: 62rem) {
    .ce-header.banner--layout-0 .banner__content,
    .ce-header.banner--layout-2 .banner__content {
        background-color: transparent;
    }

    .ce-header.banner--layout-0 .banner__content-frame,
    .ce-header.banner--layout-2 .banner__content-frame {
        background-color: var(--color-background, white);
        border-radius: var(--border-radius, 0.5rem);
        box-shadow: var(--box-shadow, 0 0.25rem 1rem 0 rgba(0, 0, 0, 0.16));
    }
}
