/*
    Block: Content Cards
    Note: Selectors must start with .block-content-cards
*/

@layer blocks {
    .block-content-cards .text-content {
        max-width: 54.125rem;
        margin-inline: auto;
        margin-bottom: 4.0625rem;
    }

    .block-content-cards .cards-wrapper {
        --cols: 2;
        display: -ms-grid;
        display: grid;
        grid-template-columns: repeat(var(--cols), 1fr);
        gap: 1.25rem;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .block-content-cards .card {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        gap: 2.5rem;
        padding: 2.1875rem;
        min-height: 14.375rem;
    }

    .block-content-cards .card__icon {
        width: 1.625rem;
        height: 1.625rem;
        -o-object-fit: contain;
           object-fit: contain;
        margin-bottom: auto;
    }

    .block-content-cards .card__label {
        margin: 0;
    }

    .block-content-cards .card__link {
        margin-top: auto;
    }

    .block-content-cards .card--text {
        background-color: rgb(from var(--c-blue) r g b / .05);
        border: 1px solid rgb(from var(--c-blue) r g b / .15);
    }

    .block-content-cards .card--cta {
        border: 1px solid black;
    }

    .block-content-cards .card--cta .card__label {
        color: rgb(from var(--c-white) r g b / .75);
    }

    .block-content-cards .card--cta .card__label :is(strong, b) {
        color: var(--c-white);
        font-weight: 500;
    }

    @media screen and (width <= 920px) {
        .block-content-cards .card {
            min-height: 12.5rem;
        }
        
        .block-content-cards .card--text {
            padding: 1.875rem 1.5rem;
        }

        .block-content-cards .card--cta {
            padding: 1.5rem;
        }
    }

    @media screen and (width <= 620px) {
        .block-content-cards .text-content {
            margin-bottom: 2.5rem;
        }

        .block-content-cards .cards-wrapper {
            --cols: 1;
        }

        .block-content-cards .card {
            min-height: unset;
        }

        .block-content-cards .card__icon {
            width: 1.125rem;
            height: 1.125rem;
        }
    }
}