.newscards{  display: flex; flex-wrap: wrap; gap: var(--gutter); --card-padding:32px; --icon:24px; }
.newscards>article{
    background: white; color:black;
    border-radius: var(--radius);  position: relative; overflow: hidden;
    width: calc(50% - (var(--gutter) / 2));  display: flex; }
.newscards>article :is(picture,txt) { width: 50%; min-width: 50%; }

    .newscards>article .txt { padding: var(--card-padding); }
    .event_cards>article .ext_icon.icon,
    .newscards>article .txt .exticon.icon { float: right; margin: 0 0 8px 8px; }

/*
.newscards>article:has(>.icon) .txt{ padding-right: 0; }
.newscards>article>.icon { margin-right: var(--card-padding); margin-top: var(--card-padding); align-self: flex-start;}
*/

.newscards>article h3 { font-size: 24px; line-height: 1.4; margin-bottom:0.5em; }
.newscards>article .byline { font-size: 16px; line-height: 1.4; margin:0; }
.newscards>article a { color:inherit; }

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

}



@media all and (max-width: 1199.98px) {
    .newscards {
        --card-padding: 24px;
    }
}

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

    .newscards>article{ width: 100%; }
}
@media all and (max-width: 599.98px) {
    .newscards {
        --card-padding: 20px; --icon:16px;
        gap: var(--gutter_big);
    }
    .newscards>article h3 { font-size: 18px; line-height: 1.4; margin-bottom:1em; }
    .newscards>article{ flex-direction: column; }
    .newscards>article :is(picture,txt) { width: 100%; min-width: 0px; }
    .newscards>article picture::before { display: block; display: block; content:""; width: 100%; height: 0; padding-bottom: 50%; }
}