.cards {

    display:flex; flex-wrap: wrap; gap: var(--gutter);

    --card-padding:32px; color: var(--black) !important;
    margin: calc(var(--gutter) / 2) 0;
}
.cards:first-child { margin-top: 0;}
.cards:last-child { margin-bottom: 0;}


.cards > article {
    background: var(--white);
    width: calc(33.333333% - (var(--gutter) * 0.666666));
    border-radius: var(--radius); box-shadow: 0px 8px 24px -4px rgba(0, 152, 219, 0.15);

    position: relative;
    overflow: hidden;
}
.cards div.txt {
    padding: var(--card-padding);

}
.cards.rows_2 > article {
    width: calc(50% - (var(--gutter) * 0.5));
}

.cards.rows_3 > article {
    width: calc(33.333333% - (var(--gutter) * 0.666666));
}


.cards.rows_4 > article {
    width: calc(25% - (var(--gutter) * 0.75));
}


.cards > .cards { width: calc(50% - (var(--gutter) * 0.5));    margin-top: 0;}
.cards > .cards > article {  }


@media (prefers-color-scheme: dark) {

    .cards > article { background: var(--container_blue) !important; color: white !important; border: 1px solid white;}


}

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

    .cards.rows_4 > article {
        width: calc(50% - (var(--gutter) * 0.5));
    }

    .cards > .cards { width: 100%;    }
}
@media all and (max-width: 899.98px) {
    .cards {
        --card-padding: 24px;

    }
    .cards > article {
        width: calc(50% - (var(--gutter) * 0.5)) !important;
    }
}
@media all and (max-width: 599.98px) {
    .cards {
        --card-padding:16px;

    }
    .cards > article {
        width: 100% !important;
    }
}


.cards > article .cardicon{
    display: block; font-style: normal; margin-bottom: 32px;
}
.cards > article .cardicon picture { display: block}
.cards > article .cardicon img{
    height: 160px; width: auto;border-radius: var(--radius_small);     display: block;
}
.cards.rows_3 > article .cardicon img {

    height: 120px;
}
.cards.rows_4 > article .cardicon img {

    height: 80px;
}

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

    .cards > article .cardicon {

        margin-bottom: var(--card-padding);
    }
    .cards > article .cardicon img {
        height: 120px;
    }
}
@media all and (max-width: 899.98px) {
    .cards.rows_4 > article .cardicon img {
        height: 120px;
    }
}

.cards > article .heading{
    font-size: 28px;
    font-weight: 700; line-height: 1.2;
    margin-bottom: 0.5em;
}

.cards > article p{
    font-size: 18px;  line-height: 1.5;
    margin:0;
}


.cards > article a {
    color:inherit;
}
.cards > article h3 a::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

}


/*.cards > article:focus-within,*/

.cards > article:has(h3 a:is(:hover,:focus-visible)) {
    background: linear-gradient(
            rgba(255, 255, 255, 0.2),
            rgba(255, 255, 255, 0.2)
    ),
    var(--hover_blue);


}
.cards > 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;
}



div.cards picture.c { width: 100%; height: auto;}
div.cards picture.c::before { content:""; display: block; height: 0; padding-bottom: 50%; }