.cta {
    --background-color: var(--bs-primary);
    border-radius: var(--bs-border-radius);
    background-color: var(--background-color);
    background-image: var(--background-pattern-location);
    background-repeat: repeat;
    padding: 3rem 2rem;
    text-align: center;
}

.cta.cta-primary {
    --background-color: var(--bs-primary);
}

.cta.cta-secondary {
    --background-color: var(--bs-secondary);
}

.cta.cta-light {
    --background-color: var(--bs-light);
}

.cta.cta-gray-600 {
    --background-color: var(--bs-gray-600);
}

.cta.cta-gray-700 {
    --background-color: var(--bs-gray-700);
}

.cta.cta-gray-800 {
    --background-color: var(--bs-gray-800);
}

.cta.cta-gray-900 {
    --background-color: var(--bs-gray-900);
}

.cta.cta-gray-black {
    --background-color: var(--bs-black);
}

@media (min-width: 576px) {
    .cta {
        transform: skew(-10deg);
    }

    .cta > * {
        transform: skew(10deg);
    }
}