@layer wpsa.modules {
	.wpsa-cta {
		display: flex;
		flex-wrap: wrap;
		gap: var(--wpsa-space-lg);
		align-items: center;
		justify-content: space-between;
	}

	.wpsa-cta .wpsa-heading-group {
		flex: 1 1 28rem;
		max-width: 48ch;
	}

	.wpsa-cta .wpsa-actions {
		flex: 0 0 auto;
	}

	/* On a dark or accent section the primary button has to invert, or it
	   disappears into the background it was meant to stand out from. */
	.wpsa-scheme--accent .wpsa-cta .wpsa-button,
	.wpsa-scheme--dark .wpsa-cta .wpsa-button {
		background: var(--wpsa-color-inverse-text);
		color: var(--wpsa-color-inverse-bg);
	}

	.wpsa-scheme--accent .wpsa-cta .wpsa-button:hover,
	.wpsa-scheme--dark .wpsa-cta .wpsa-button:hover {
		background: #fff;
	}
}