/* v1.3.34: CTA uses the footer width and its own readable three-column layout. */
.xp-e-cta,
.xp-cta {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

@media (min-width: 1101px) {
    .xp-e-cta {
        display: grid !important;
        grid-template-columns: minmax(260px, 1.2fr) minmax(220px, .8fr) minmax(380px, 1.7fr) !important;
        align-items: center !important;
        gap: 34px !important;
        width: 100% !important;
        max-width: none !important;
        padding-right: max(40px, calc((100% - var(--xp-content-line)) / 2)) !important;
        padding-left: max(40px, calc((100% - var(--xp-content-line)) / 2)) !important;
    }

    .xp-e-cta-title {
        grid-column: 1 !important;
        min-width: 0 !important;
    }

    .xp-e-cta-text {
        grid-column: 2 !important;
        min-width: 0 !important;
    }

    .xp-e-cta-buttons {
        grid-column: 3 !important;
        min-width: 0 !important;
        justify-content: flex-start !important;
    }
}

@media (min-width: 621px) and (max-width: 1100px) {
    .xp-e-cta {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 24px !important;
        padding-right: 24px !important;
        padding-left: 24px !important;
    }

    .xp-e-cta > * {
        width: 100% !important;
    }
}

@media (max-width: 620px) {
    .xp-e-cta {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 20px !important;
        width: 100% !important;
        max-width: none !important;
        margin: 20px 0 !important;
        padding: 28px 20px !important;
    }

    .xp-e-cta > * {
        width: 100% !important;
        min-width: 0 !important;
    }
}