.card{border-radius: 12px;overflow: hidden; position: relative;}
.card .text.section {padding: 24px 18px; position: relative;}
.card .brow{margin: 0 0 9px 0;}
.card .headline{margin: 0 0 9px 0;}
.card .text p:nth-last-of-type(1){margin-bottom: 0 !important;}

.card--logo .image.section.parbase:nth-child(2){width: 130px; height: 60px; position: absolute; top: 24px; right: 50%; transform: translateX(50%); z-index: 2;}
.card--logo .image.section.parbase:nth-child(2) > div {padding: 0;height: 100%;}
.card--logo .image.section.parbase:nth-child(2) img{object-fit: contain; object-position: top;}

.card--link{text-decoration: none;}
.card--link:after{content:"\f061"; font-family: 'Font Awesome 6 Sharp'; position: absolute; bottom: 24px; right: 18px; font-size: 1.1rem; line-height: 1; opacity: 0; transition: 300ms;}
.card--link .text.section{padding: 24px 47px 24px 18px;}

a.card--link:hover {color: initial !important;}
a.card--link:hover:after{opacity: 1;}

@media screen and (max-width: 39.9375em) {
    /* Make Arrows Appear for Mobile */
    .card--link:after {
        opacity: 1;
    }
} 
/* ------ Breakpoint references ------ */

/* Small only --- >640px */
@media screen and (max-width: 39.9375em) {}   

/* Medium and up --- 640px< */
@media screen and (min-width: 40em) {}      

/* Medium only --- 640px-1024px*/
@media screen and (min-width: 40em) and (max-width: 63.9375em) {}

/* Large and up --- 1024px<  */
@media screen and (min-width: 64em) {}