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

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

    --card-padding:40px;
    --logo-height:48px;
    --heading:32px;
    --tags:17px;

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

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

    position: relative;

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

    display: flex;flex-direction: column; transition: all 0.2s ease;
}
@media all and (max-width: 1199.98px) {
    div.cards_casestudies {
        --card-padding:24px;
    }
    div.cards_casestudies > article {
        width: calc(50% - var(--gutter_big));
    }
}
@media all and (max-width: 899.98px) {
    div.cards_casestudies {
        --card-padding: 24px;
        --logo-height: 36px;
        --heading:24px;
    }
}
@media all and (max-width: 599.98px) {
    div.cards_casestudies {
        --card-padding:16px;
        --logo-height: 32px;
        --tags: 16px;
    }
    div.cards_casestudies > article {
        width: calc(100% - var(--gutter_big));
    }
}

div.cards_casestudies > article>div.txt {
    padding: calc(var(--card-padding) * 1.6) var(--card-padding) var(--card-padding);
    padding: var(--card-padding);
      flex: 1;
    display: flex;flex-direction: column;
}

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

    display: flex;
    flex-wrap: wrap; /* Allows wrapping if needed */
    gap: 0.5em; row-gap:0;
    list-style: none;
    padding: 0;
    margin: auto 0 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_casestudies > article a::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

}


div.cards_casestudies > article:focus-within,
div.cards_casestudies > article:has(a:hover) {
        background: linear-gradient(
                rgba(255, 255, 255, 0.2),
                rgba(255, 255, 255, 0.2)
        ),
        var(--ttl_lightyellow);


}

div.cards_casestudies > 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;
}