DIV.banner
{
    CONTAIN: content;
    DISPLAY: grid;
    HEIGHT: 100%;
}

DIV.banner-image
{
    BACKGROUND: #361800;
    GRID-COLUMN: 1;
    GRID-ROW: 1;
    MIN-HEIGHT: max(50vh, 500 * var(--cms-factor));
    OVERFLOW: clip;
}

DIV.banner-image > IMG
{
    HEIGHT: 100%;
    LEFT: 0;
    OBJECT-FIT: cover;
    OPACITY: 0.65;
    POSITION: absolute;
    TOP: 0;
    WIDTH: 100%;
}

DIV.banner-content
{
    --cms-color: var(--cms-color-alt);
    --cms-button-background: var(--cms-button-border-color);

    BOX-SIZING: border-box;
    GRID-COLUMN: 1;
    GRID-ROW: 1;
    MAX-WIDTH: calc(800 * var(--cms-factor));
    PADDING: var(--tpl-vspacing) var(--cms-hpadding);
    PLACE-SELF: center;
}

DIV.banner-content,
DIV.banner-content *
{
    COLOR: var(--cms-color);
}

DIV.banner-content DIV.teaser4-title1,
DIV.banner-content DIV.teaser4-title2,
DIV.banner-content DIV.teaser4-text
{
    TEXT-SHADOW: 0 0 calc(100 * var(--cms-factor)) #000000;
}