@layer components {
    .pricing-credits {
        padding-block: var(--space-xl);
        padding-inline: var(--space-s);
        background: var(--color-surface-mixed);

        & .pricing-credits__intro {
            max-width: 48rem;
            margin-inline: auto;
            margin-block-start: var(--space-m);
            color: var(--color-text-muted);
            text-align: center;
        }

        & .pricing-credits__table {
            max-width: 48rem;
            margin-inline: auto;
            margin-block-start: var(--space-l);
        }

        & .pricing-credits__note {
            max-width: 48rem;
            margin-inline: auto;
            margin-block-start: var(--space-s);
            color: var(--color-text-muted);
            font-size: 0.9rem;
            text-align: center;
        }
    }
}