@layer components {
    .marketing-cta {
            align-items: center;
            display: grid;
            gap: 1.25rem;
        }

    .marketing-cta--center {
            justify-items: center;
            text-align: center;
        }

    .marketing-cta--center h2 {
            display: grid;
            gap: 0.25rem;
        }

    .marketing-cta--center h2 span + span {
            color: var(--dashboard-color-brand);
        }

    @media (min-width: 48rem) {
        .marketing-cta {
                    grid-template-columns: minmax(0, 1fr) auto;
                }
    }

    @media (min-width: 48rem) {
        .marketing-cta.marketing-cta--center {
                    grid-template-columns: minmax(0, 1fr);
                }
    }
}