.banner_cards { display: flex; flex-wrap: wrap; justify-content: space-between; }

.banner_cards>div { width:calc(50% - (var(--gutter) / 2)); border-radius: var(--radius); overflow: hidden;
    display: flex; flex-direction: column; margin-bottom: var(--gutter);
}

.banner_cards>div>picture { display: block; width: 100%;height:auto;
    position: relative; overflow: hidden; }
.banner_cards>div>picture::before { display: block; content:""; width:100%; height:0; padding-bottom: 50%;}


.banner_cards>div>picture img {
    display: block; object-fit: cover;
    width: calc(100% + 2px);
    height:  calc(100% + 2px);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.banner_cards>div>div { padding: 48px 64px 52px; background-color: var(--cta-blue); color: white; flex: 1;}

.banner_cards>div.colour_white {       box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.10), 0px 24px 32px 0px rgba(0, 0, 0, 0.10);
}
.banner_cards>div.colour_white>div {  background-color: white; color:var(--black); }



.banner_cards div p:not(.cta) { font-size:19px; margin-bottom: 1em; }
.banner_cards div p.cta+.cta { margin-top: 1em;}
.banner_cards div p.cta a { color: inherit; background-color: inherit; border-color: currentColor; }
.banner_cards div p.cta a:hover {
    color: var(--black); background-color: white; border-color: white;
}
.banner_cards div p.cta a:focus-visible { box-shadow: 0 0 0 3px var(--cta-blue), 0 0 0 5px var(--orange);   }
.banner_cards>div:first-child:nth-last-child(odd)>div p.cta a:focus-visible { box-shadow: 0 0 0 3px white, 0 0 0 5px var(--orange);   }

.banner_cards div.colour_white p.cta a:hover {
    color: white; background-color: var(--cta-blue); border-color: var(--cta-blue);
}



@media all and (min-width: 900px) {

    /* first card is odd number from the end */

    .banner_cards > div:first-child:nth-last-child(odd) {
        display: flex; flex-direction: row;width: 100%;
    }
    .banner_cards > div:first-child:nth-last-child(odd) p.cta a:hover {
        color: white; background-color: var(--black); border-color: var(--black);
    }
    .banner_cards > div:first-child:nth-last-child(odd)>picture,
    .banner_cards > div:first-child:nth-last-child(odd)>div {  width: 50%; }
    .banner_cards > div:first-child:nth-last-child(odd)>div { background-color: white; color:var(--black); }
}


@media all and (max-width:1199px) {
    .banner_cards>div>div { padding: 32px 48px 40px;  }



}
@media all and (max-width: 899px) and (min-width: 600px) {
    .banner_cards > div {
        display: flex; flex-direction: row; width: 100%;
    }
    .banner_cards > div > picture,
    .banner_cards > div > div {  width: 50%; }
    .banner_cards > div:nth-child(even) > picture { order: 10; }

    .banner_cards > div:first-child:nth-last-child(odd)>div { background-color: white; color:var(--black); }
}
@media all and (max-width: 899px) {

    .banner_cards>div>picture::before {   padding-bottom: 66.66%;}

     
}




@media all and (max-width: 599px) {
    .banner_cards>div {   width:100%;  }


    .banner_cards > div > div {
        padding: 24px 24px 28px;
    }
}

/*

!* two items *!
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li {
    width: 50%;
}

!* three items *!
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
    width: 33.3333%;
}

!* four items *!
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
    width: 25%;
}
*/