.highlight_banner { display: flex; border-radius: var(--border-radius); overflow: hidden;   margin: 64px 0;

    background: white;
    position: relative;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);

}

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

.highlight_banner.o { background: var(--orange); }
.highlight_banner.y { background: var(--yellow); }
.highlight_banner.p { background: var(--purple); }
.highlight_banner.r { background: var(--red); }


.highlight_banner.red { background:var(--red); }
.highlight_banner.yellow{ background:var(--yellow); }
.highlight_banner.orange{ background:var(--orange); }
.highlight_banner.purple{ background:var(--purple); }
.highlight_banner.teal{ background:var(--teal); }
.highlight_banner.sky{ background:var(--sky); }
.highlight_banner.yai {  background: rgb(47,51,83); }
.highlight_banner.yai div{

    background: linear-gradient(130deg, rgba(232,17,75,1) 0%, rgba(47,51,83,1) 25%) !important;
    color:white !important;
    transition: none;
}
body.young-academy-ireland .highlight_banner.red,
body.single-young_academy .highlight_banner.red
{
    background:var(--yai-red) ;
}



.highlight_banner .authors { position: absolute; top: 0; left: 0;  padding:32px;}
.highlight_banner .authors picture {     width: 64px;
    height: 64px;
     }

.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: 104px 88px;

display: flex; flex-direction: column;  justify-content: center;
}
a.highlight_banner { color: var(--black);     transition: color 0.2s ease-out, background-color 0.2s ease-out; }
a.highlight_banner div { padding: 64px;   }

a.highlight_banner:focus-visible {  box-shadow: 0 0 0 4px white, 0 0 0 7px var(--orange);   }

a.highlight_banner:is(:hover,:focus-visible) {
    background: var(--dark-purple);
    color: white;
}

.highlight_banner div p:not(.cta){ font-size:28px; }
.highlight_banner div p:not(.cta):not(:last-child){   margin-bottom: 1em;  }


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

    .highlight_banner div { padding: 104px 88px; }
}
@media all and (max-width: 1199px) {

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

}

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

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

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

    .highlight_banner { flex-direction: column; }
    .highlight_banner :is(figure,div) { width:100%; }
    .highlight_banner figure picture {
        height: 0; padding-bottom: 50%;
    }
    .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: 899px) {
    .highlight_banner div p:not(.cta){ font-size:20px;  }

}