/*
    Block: Keyword Cards
    Note: Selectors must start with .block-keyword-cards
*/

@layer blocks {
    .block-keyword-cards .main-wrapper .text-content {
        --gap: 3.125rem;
        gap: var(--gap);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .block-keyword-cards .text-content > * {
        margin-block: 0;
    }

    .block-keyword-cards .main-wrapper .text-content :is(h3, .h3) {
        max-width: 67%;
        margin: 0 auto;
    }

    .block-keyword-cards .cards-list {
        list-style: none;
        margin: 0;
        padding:0;
        margin-block: 4.0625rem;

        display: -ms-grid;

        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 1.25rem;
        -webkit-box-align: stretch;
            -ms-flex-align: stretch;
                align-items: stretch;
    }

    .block-keyword-cards .card-item {
        --border-stroke: hsl(226 50% 27% / 15%);
        border: 1px solid var(--border-stroke);
        background-color: #F4F5F7;
        padding: 2.1875rem 1.875rem;
    }

    .block-keyword-cards .card__title {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        gap: 0.625rem;
        font-size: var(--fs-18-22);
        font-weight: 500;
        margin: 0;
        color: var(--c-blue);
    }

    .block-keyword-cards .card__title span {
        line-height: 1.2;
        letter-spacing: -.06em;
    }

    .block-keyword-cards .card__title svg {
        color: var(--c-orange);
        width: 1.25rem;
        height: 1.25rem;
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        margin-top: calc((1lh - 36px) / 2);
    }

    .block-keyword-cards .card__description {
        margin-block: 1.375rem 0;
    }

    @media screen and (width <= 920px) {
        .block-keyword-cards .cards-list {
            grid-template-columns: repeat(2,1fr);
            margin-block: 2.5rem;
            gap: 0.9375rem;
        }
        .block-keyword-cards .main-wrapper .text-content {
            --gap: 1.875rem;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            gap: var(--gap);
        }
        .block-keyword-cards .main-wrapper .text-content :is(h3, .h3) {
            max-width: 100%;
            margin-inline: 0.75rem;
        }
    }

    @media screen and (width <= 620px) {
        .block-keyword-cards .card__title {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            gap: 1rem;
        }
        .block-keyword-cards .card__title svg {
            width: 0.875rem;
            height: 0.875rem;
            margin-top: 0;
            -webkit-box-flex: unset;
                -ms-flex: unset;
                    flex: unset;
        }
        .block-keyword-cards .card__description {
            margin-block: 1rem 0;
        }
        .block-keyword-cards .card-item {
            padding: 1.25rem 1rem;
        }
    }

}