.ttl_cards {

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

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


.ttl_cards > div {
    background: var(--ttl_green);
    width: calc(33.333333% - (var(--gutter) * 0.666666));
    border-radius: var(--radius);
    padding: var(--card-padding);
    position: relative;
    overflow: hidden;
}

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

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


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



.ttl_cards > div.ttl_green { background: var(--ttl_green);}
.ttl_cards > div.ttl_white { background: white; }

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

    .ttl_cards > div { background: var(--ttl_black) !important; color: white !important; border: 1px solid white;}


}

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

    .ttl_cards.rows_4 > div {
        width: calc(50% - (var(--gutter) * 0.5));
    }
}
@media all and (max-width: 899.98px) {
    .ttl_cards {
        --card-padding: 24px;

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

    }
        .ttl_cards > div {
            width: 100% !important;
        }
}


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

    height: 120px;
}
.ttl_cards.rows_4 > div .cardicon img {

    height: 80px;
}

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

    .ttl_cards > div .cardicon {

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

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


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


.ttl_cards > div a {
    color:inherit;
}

@media all and (max-width: 899.98px) {
    .ttl_cards > div .heading{
        font-size: 24px;
    }
}
@media all and (max-width: 599.98px) {
    .ttl_cards > div .heading{
        font-size: 18px;
    }
    .ttl_cards > div p{
        font-size: 16px;
    }
}


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

}


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


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