div.cards_news {
    display: flex; flex-wrap: wrap;
    width: calc(100% + var(--gutter_big));

    position: relative;
    right: calc(var(--gutter_big) / 2);

    --card-padding:40px;
    --card-padding-adjust:8px;
    --logo-height:48px;
    --heading:28px;
    --tags:18px;
    --dt:16px;

    margin: calc(var(--gutter_big) / 2) 0;
}
div.cards_news strong {
    font-weight: 700;}
.cardheader+div.cards_news,
div.cards_news:first-child { margin-top: 0; }
div.cards_news:last-child { margin-bottom: 0; }

div.cards_news picture.c { width: 100%; height: auto;}
div.cards_news picture.c::before { content:""; display: block; height: 0; padding-bottom: 50%; }
div.cards_news > article {
    width: calc(33.333% - var(--gutter_big));
    margin: calc(var(--gutter_big) / 2);

    position: relative;

    background: var(--ttl_green); color:var(--ttl_black);
    border-radius: var(--radius); overflow: hidden;

    display: flex;flex-direction: column; transition: all 0.2s ease;
}



div.cards_news .byline { display:flex; align-items:center; gap: 16px;}

div.cards_news .byline picture.c { width: 64px; height: 64px; border-radius: 50%;}

div.cards_news .meta {display:flex; gap: 16px; justify-content: space-between; margin-bottom: 12px;}

@media (prefers-color-scheme: dark) {
    div.cards_news > article {
        border:1px solid currentColor; background-color: transparent;
        color:currentColor;
    }
}

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

    div.cards_news.big_news > article {
        width: calc(50% - var(--gutter_big));
    }
}

@media all and (max-width: 1199.98px) {
    div.cards_news {
        --card-padding:24px;
        --card-padding-adjust:4px;
    }
    div.cards_news > article {
        width: calc(50% - var(--gutter_big));
    }
}
@media all and (max-width: 899.98px) {
    div.cards_news {
        --card-padding: 24px;
        --card-padding-adjust:4px;
        --logo-height: 36px;
        --heading:24px;
    }
}
@media all and (max-width: 599.98px) {
    div.cards_news {
        --card-padding:16px;
        --card-padding-adjust:0px;
        --logo-height: 32px;
        --tags: 16px;
    }
    div.cards_news > article {
        width: calc(100% - var(--gutter_big));
    }
}

div.cards_news > article>div.txt {
    padding: calc(var(--card-padding) - var(--card-padding-adjust)) var(--card-padding) var(--card-padding);

    flex: 1;
    display: flex;flex-direction: column;/* gap:var(--tags);*/
}

div.cards_news .heading { font-size:var(--heading); line-height: 1.4;  margin-bottom: 20px;}
div.cards_news .heading a {color:inherit; }
div.cards_news .heading a:focus-visible {display: inline-block; background: none; }



div.cards_news :is(dd,time,p) { font-size:var(--tags); line-height: 1.4; font-weight: 500; }
div.cards_news dt  { font-size:16px; line-height: 1.4; }
div.cards_news dd  { font-weight: 500;}
div.cards_news time  { margin-bottom: auto; }



div.cards_news dl {     display: flex; align-items: center;
    flex-wrap: wrap;
    gap: 16px; row-gap:0;
    list-style: none;
    padding: 0; }


.tags li {
    font-size:inherit; line-height:inherit;

}

/* Add bullet separator */
.tags li:not(:last-child)::after {
    content: "•";
    margin-left: 0.5em;
    /*    margin-right: 0.5em;*/
}



.client_logo {  height: 0 !important; margin-bottom: calc(var(--logo-height) / 2); position: relative; padding-left: var(--card-padding); }
.client_logo picture {  /*border: 1px solid var(--ttl_black);*/ background: white; border-radius: 8px; padding: calc(var(--logo-height) / 4);
    position: absolute; top: 0; transform: translateY(-50%);
}
.client_logo picture img { height: var(--logo-height); width: auto; display: block;}


div.cards_news > article a::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

}


div.cards_news > article:focus-within,
div.cards_news > article:has(a:hover) {
    background: linear-gradient(
            rgba(255, 255, 255, 0.8),
            rgba(255, 255, 255, 0.8)
    ),
    var(--ttl_cream);


}

div.cards_news > article:has(a:focus-visible){
    /* outline:2px solid var(--ttl_error); outline-offset: 2px; */ outline: 3px solid black; box-shadow: 0 0 0 6px white;
}

@media (prefers-color-scheme: dark) {
    div.cards_news > article:focus-within,
    div.cards_news > article:has(a:hover) {
        background: rgba(255, 255, 255, 0.1);
    }

}