
.col-left { position:relative; border-radius:var(--round-deep); overflow:hidden; box-shadow:var(--shadow-md) }
.col-left:after { content: ""; height: 100%; z-index: -1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image:linear-gradient(to top, rgb(37 47 55 / 86%), rgb(37 47 55 / 77%), rgb(37 47 55 / 75%), rgb(37 47 55 / 50%), rgb(37 47 55 / 40%), rgb(37 47 55 / 43%)); }
.col-left > img { object-fit: cover; position:absolute; width: 100%; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; z-index: -1; }
.col-left a:not(.btn) { position:absolute; bottom:0px; left:0px; z-index:4; width:100%; height:100% }
.col-left .featured { position:absolute; bottom:20%; left:10%; z-index:1; color:var(--white); width:70% }
.col-left a > div strong { font-size: var(--text-xl) !important; line-height: var(--text-lineheight); margin-bottom: var(--margin-tb-xxs); display: block; }
.col-right .resources-block-item { margin-bottom:var(--margin-tb-xs); margin-left:10%; display:inline-block; width: calc(100% - 10%); }
.resources-block-item { border-bottom:0px !important; color: var(--midnight);}
.resources-block-item:hover { border-bottom:0px !important; color:var(--blue-light) }
.col-right .resources-block-item:last-child { margin-bottom:0px }

.col-left a.btn{position:absolute; bottom:10%; right:10%; z-index:10;}

svg.arrow { fill:var(--blue-light); width:16px; height:16px; margin-right:10px; margin-left:0px; position:relative; transition: all .2s; will-change:transform; }
.resources-block-item:hover svg.arrow {transform: translateX(6px);}

@media screen and (max-width: 1024px) {
    .relatedPosts-flex .col-left {
        min-height: 400px;
    }

    .relatedPosts-flex .col-right {
        padding-top: 45px;
    }
    
    .relatedPosts-flex .col-right a {
        margin-left: 0;
    }

    .relatedPosts-flex .col-left .featured {
        bottom: 25% !important;
    }

    .relatedPosts-flex .col-left a.btn {
        left: 10%;
        right: unset;
        bottom: 10%;
    }
}

@media screen and (max-width: 576px) {
    .relatedPosts-flex .col-left a > div strong {
        font-size: 20px !important;
    }

    .relatedPosts-flex .col-left {
        min-height: 575px;
    }
}
