.highlight_banner { display: flex; border-radius: var(--radius); overflow: hidden;

    margin: var(--gutter_big) 0;

    background: white;
    position: relative;
    --card-padding:40px;
}

.highlight_banner:first-child { margin-top:0; }
.highlight_banner:last-child { margin-bottom:0; }

.highlight_banner.ttl_pink { background: var(--ttl_pink); }
.highlight_banner.ttl_blue { background: var(--ttl_blue); }
.highlight_banner.ttl_green { background: var(--ttl_green); }
.highlight_banner.ttl_coral { background: var(--ttl_coral); }
.highlight_banner.ttl_lightyellow { background: var(--ttl_lightyellow); }

@media (prefers-color-scheme: dark) {

    .highlight_banner { background: var(--ttl_black) !important; border: 1px solid white;}


}


.highlight_banner :is(figure,div) {    display: block;
    width: 50%;
    position: relative; }
.highlight_banner figure picture {
    position: absolute; top: 0; left: 0; /**/
    width: 100%; height: 100%;
}

.highlight_banner figure::before {
    display: block; content:""; width: 100%;
    height: 0; padding-bottom: 50%;
}

.highlight_banner figure { /*order: -1;*/
    display: flex;flex-direction: column; flex:1;

}

.highlight_banner div { padding: var(--card-padding);
    display: flex; flex-direction: column;  justify-content: center;
}

.highlight_banner div h2 { font-size: 40px; }
.highlight_banner div p:not(.cta) { font-size: 20px; line-height: 1.5;  }
.highlight_banner div p:not(:last-child){ margin-bottom: var(--bodytext_size);}
.highlight_banner div p.cta{ margin-top: auto; }

@media all and (max-width: 1199.98px) {
    .highlight_banner {
        --card-padding: 32px;
    }

    .highlight_banner div h2 {
        font-size: var(--h2_size);
    }
    .highlight_banner div p:not(.cta) { font-size: 18px;  }
}
@media all and (max-width: 899.98px) {
    .highlight_banner {
        --card-padding: 24px;

    }
}
@media all and (max-width: 599.98px) {
    .highlight_banner {
        --card-padding:16px;
    }
    .highlight_banner div p:not(.cta) { font-size: 16px;  }
}



@media all and (max-width: 1199.98px) {

}
@media all and (max-width: 899.98px) {

    .highlight_banner { flex-direction: column; }
    .highlight_banner :is(figure,div) { width:100%; }
    .highlight_banner figure::before {
        display: none !important;
    }
    .highlight_banner figure picture {
        height: 0; padding-bottom: 75%;
        position: static;
    }
    .highlight_banner div { padding: 32px; }
    a.highlight_banner div { padding: 32px; }

    .highlight_banner div p:not(.cta){ font-size:24px;  }

}


@media all and (max-width: 599.98px) {
    .highlight_banner div p:not(.cta){ font-size:20px;  }
    .highlight_banner div { padding: 20px; }
    .highlight_banner div p:not(.cta){ font-size:18px;  }

}