.c-cta-banner {
	padding: var(--spacing-md) 0;

	&.c-cta-banner--background-blue {
		background: var(--color-blue);
	}

	&.c-cta-banner--background-grey {
		background: var(--color-grey-light);
	}

	.c-cta-banner__container {
		display: flex;
		flex-direction: column;

		@media (width > 768px) {
			display: grid;
			column-gap: var(--spacing-sm);
			grid-template-areas:
				'subheading button'
				'heading button'
				'text text';
		}

		&.c-cta-banner__container--text-constrained {
			@media (width > 768px) {
				grid-template-columns: repeat(2, 1fr);
				grid-template-areas:
					'subheading button'
					'heading button'
					'text button';
			}
		}

		&.c-cta-banner__container--text-wide {
			@media (width > 768px) {
				grid-template-columns: 1fr auto;
				grid-template-areas:
					'subheading button'
					'heading button'
					'text button';
			}
		}
	}

	.c-cta-banner__sub-heading:empty,
	.c-cta-banner__heading:empty,
	.c-cta-banner__text:empty,
	.c-cta-banner__button-wrapper:empty {
		display: none;
	}

	.c-cta-banner__heading {
		grid-area: heading;
		color: var(--color-primary);
	}

	.c-cta-banner__sub-heading {
		grid-area: subheading;
		font-weight: bold;
		color: var(--color-primary);
	}

	.c-cta-banner__text {
		grid-area: text;

		&.text-large {
			display: contents;
		}

		p {
			&:last-of-type {
				@media (width > 768px) {
					margin-bottom: 0;
				}
			}
		}

		a {
			color: var(--color-secondary);

			&:hover,
			&:focus {
				color: var(--color-primary);
			}
		}
	}

	.c-cta-banner__button-wrapper {
		grid-area: button;
		display: flex;
		align-items: flex-start;

		@media (width > 768px) {
			justify-content: flex-end;
		}

		&.c-cta-banner__button-wrapper--align-center {
			align-items: center;
		}

		&.c-cta-banner__button-wrapper--align-bottom {
			align-items: flex-end;
		}
	}
}