.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.image_right {
    flex-direction: row-reverse;

}
/*
yellow-lightest
yellow-lighter
yellow
green-lightest
green-lighter
green
green-darker
green-darkest
blue-lightest
blue-lighter
blue
blue-darker
blue-darkest*/

.highlight_banner.yellow-lightest {     background:var(--yellow-lightest); color:black; }
.highlight_banner.yellow-lighter{     background:var(--yellow-lighter); color:black; }
.highlight_banner.yellow{     background:var(--yellow); color:black; }
.highlight_banner.green-lightest{     background:var(--green-lightest); color:black; }
.highlight_banner.green-lighter{     background:var(--green-lighter); color:black; }
.highlight_banner.green{     background:var(--green); color:black; }
.highlight_banner.green-darker{     background:var(--green-darker); color:white; }
.highlight_banner.green-darkest{     background:var(--green-darkest); color:white; }
.highlight_banner.blue-lightest{     background:var(--blue-lightest); color:black; }
.highlight_banner.blue-lighter{     background:var(--blue-lighter); color:black; }
.highlight_banner.blue{     background:var(--blue-darkest); color:white; }
.highlight_banner.blue-darker{     background:var(--blue-darkest); color:white; }
.highlight_banner.blue-darkest{     background:var(--blue-darkest); color:white; }


.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); }

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 b.image_placeholder,
.highlight_banner :is(figure,div) {    display: block;
    width: 50%;
    position: relative; }
.highlight_banner b.image_placeholder,
.highlight_banner figure {

    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1728 864"> <rect fill="%231eb46a" width="1728" height="856"/> <path fill="%239fdbb3" d="M0,553l72,9c72,8,216,26,360,43s288,35,432,9c144-26,288-95,432-104s288,43,360,69l72,26v259H0v-311Z"/> <path fill="%23f0db10" d="M0,103.7l72,34.6c72,34.6,216,103.7,360,103.7s288-69.1,432-69.1,288,69.1,432,86.4c144,17.3,288-17.3,360-34.6l72-17.3V0H0v103.7Z"/>  <path fill="%23035193" d="M0,792l72-30c72-30,216-90,360-108s288,6,432,36c144,30,288,66,432,36s288-126,360-174l72-48v360H0v-72Z"/> </svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.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: black;     transition: color 0.2s ease-out, background-color 0.2s ease-out;margin: var(--gutter) 0;  }
a.highlight_banner div { padding: 64px;  }
a.highlight_banner figure { order: 2 }
a.highlight_banner:focus-visible {  box-shadow: 0 0 0 4px white, 0 0 0 7px var(--green);   }

a.highlight_banner:is(:hover,:focus-visible) {
    background: var(--blue-darkest);
    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:  var(--padding); }
    .highlight_banner div p:not(.cta){ font-size:24px;  }

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

    .highlight_banner { flex-direction: column; }
    .highlight_banner b.image_placeholder { display: none; }

    .highlight_banner :is(figure,div) { width:100%; }
    .highlight_banner figure picture {
        height: 0; padding-bottom: 50%;
    }
    .highlight_banner div { padding: var(--padding); }
    a.highlight_banner div { padding: var(--padding); }

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

}


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

}