/*
    Block: Image + Text
    Note: Selectors must start with .block-image-text
*/

@layer blocks {
    .block-image-text .main-wrapper {
        display: -ms-grid;
        display: grid;
        -webkit-box-align: stretch;
            -ms-flex-align: stretch;
                align-items: stretch;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .block-image-text .image-wrapper {
        margin: 1.25rem 0 1.25rem 1.25rem;
        min-height: 0;
        overflow: hidden;
        contain: size;
    }

    .block-image-text .image-wrapper img {
        -o-object-fit: cover;
           object-fit: cover;
        width: 100%;
        height: 100%;
    }

    .block-image-text .text-container {
        margin: 1.25rem auto;
        width: 67.88%;
        padding-block: 7.5rem;
    }

    .block-image-text .text-container .buttons {
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
        margin-top: 2.5rem;
    }

    .block-image-text .text-container p {
        max-width: 85%;
    }

    .block-image-text .keywords {
        list-style: none;
        padding: 0;
    }

    .block-image-text .keywords li {
        text-indent: 1.75rem hanging;
        font-weight: 500;
    }

    .block-image-text .keywords li:not(:last-child) {
        margin-bottom: 1rem;
    }

    .block-image-text .keywords li::before {
        content: '';
        display: inline-block;
        width: 1rem;
        height: 1rem;
        -webkit-transform: translateY(.15rem);
            -ms-transform: translateY(.15rem);
                transform: translateY(.15rem);
        margin-right: .75rem;
        background-image: var(--i-check-circle);
        background-size: 1rem;
        background-repeat: no-repeat;
    }

    .block-image-text .image-right .image-wrapper {
        order: 1
    }

    @media screen and (width <= 920px) {
        .block-image-text .text-content {
            --gap: 1.875rem;
        }
        .block-image-text .text-container {
            padding-block: 3.75rem;
        }
    }

    @media screen and (width <= 620px) {
        .block-image-text .main-wrapper {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            gap: 2.8125rem;
            padding: .9375rem;
            padding-bottom: 3.125rem;
        }
        .block-image-text .image-wrapper {
            margin: 0;
            aspect-ratio: 0.86;
        }
        .block-image-text .text-container {
            margin: 0;
            padding: 0 .5625rem;
            width: 100%;
        }
        .block-image-text .text-container .buttons {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            gap: 1.375rem;
            margin-top: 1.875rem;
            -webkit-box-align: start;
                -ms-flex-align: start;
                    align-items: flex-start;
        }

        .block-image-text .keywords li {
            text-indent: 1.3125rem hanging;
        }

        .block-image-text .keywords li:not(:last-child) {
            margin-bottom: .875rem;
        }

        .block-image-text .keywords li::before {
            width: .8125rem;
            height: .8125rem;
            -webkit-transform: translateY(.1rem);
                -ms-transform: translateY(.1rem);
                    transform: translateY(.1rem);
            margin-right: .5rem;
            background-size: .8125rem;
        }

        .block-image-text .text-content:has(.keywords) {
            --gap: 1.5625rem;
        }

        .block-image-text .text-container p {
            max-width: 100%;
        }
    }
}