/*
    Block: Full Bleed CTA
    Note: Selectors must start with .block-full-bleed-cta
*/

@layer blocks {
    .block-full-bleed-cta .main-wrapper {
        aspect-ratio: 2.68;
    }

    .block-full-bleed-cta .media-wrapper::after{
        content: '';
        position: absolute;
        inset: 0;
        background: #0000004D;
    }

    .block-full-bleed-cta .main-wrapper .overlay {
        height: 100%;
    }

    .block-full-bleed-cta .primary-wrapper {
        -ms-flex-item-align: end;
            -ms-grid-row-align: end;
            align-self: end;
        margin: auto auto 2.8125rem 2.5rem;
        max-width: 40.3125rem;
    }

    .block-full-bleed-cta .primary-wrapper .text-content {
        text-wrap: balance;
    }

    .block-full-bleed-cta .secondary-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.125rem;
        -ms-flex-item-align: start;
            align-self: flex-start;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        margin: 6.25rem 5.9375rem auto auto;
        max-width: 24.375rem;
    }

    .block-full-bleed-cta .secondary-wrapper .text-content {
        text-wrap: balance;
    }

    .block-full-bleed-cta .text-content a {
        color: currentColor;
        text-decoration: none;
    }

    @media screen and (width <= 1050px) {
        .block-full-bleed-cta .secondary-wrapper {
            margin: 2.5rem 2.5rem auto auto;
        }
    }

    @media screen and (width <= 920px) {
        .block-full-bleed-cta .main-wrapper {
            aspect-ratio: 2;
        }
        .block-full-bleed-cta .main-wrapper .overlay {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
        }
        .block-full-bleed-cta .secondary-wrapper {
            margin: auto auto 1.875rem 1.5rem;
        }
        .block-full-bleed-cta .primary-wrapper {
            margin: 2.5rem auto auto 1.5rem;
        }
        .block-full-bleed-cta .primary-wrapper .text-content > * {
            margin-block: 0 var(--gap);
            --gap: 1.875rem;
        }
        .block-full-bleed-cta .secondary-wrapper {
            gap: 1.625rem;
        }
    }

    @media screen and (width <= 620px) {
        .block-full-bleed-cta .main-wrapper {
            aspect-ratio: 0.85;
        }
    }
}