.call-to-action {
	--title-color: var(--gray-100);
	--subtitle-color: var(--gray-100);
	--icon-color: var(--gray-100);
	--title-font-family: var(--font-display);
	--subtitle-font-family: var(--font-body);
	background: #dcedea;

	.cta-container > div:nth-child(2) & {
		background: #f7e8dd;
	}
	.cta-container > div:nth-child(3) & {
		background: #e0f2fa;
	}

	a {
		text-decoration: none;
	}
}

.cta-container {
	background-color: #fff;
	display: grid;
	gap: 10px;

	.header-container & {
		order: 1;
	}
}

@media (min-width: 64em) {
	.cta-container {
		display: flex;
		margin-bottom: 10px;

		.header-container & {
			grid-column: 1 / 3;
			margin-bottom: 0;
			align-items: flex-end;
		}
	}

	.cta-container > div {
		flex: 1 1 0;
	}
}

.call-to-action .inner {
	display: flex;
	justify-content: flex-start;
	align-items: baseline;
	gap: var(--space-5);
	padding: 24px var(--space-5) 18px;
	padding-left: 80px;
	position: relative;

	&:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 62px;
		pointer-events: none;
		background-image: url(/includes/client_public/assets/shared/cta/child-1-asset.svg);
	}

	.cta-container > div:nth-child(2) &:before {
		background-image: url(/includes/client_public/assets/shared/cta/child-2-asset.svg);
	}
	.cta-container > div:nth-child(3) &:before {
		background-image: url(/includes/client_public/assets/shared/cta/child-3-asset.svg);
	}
}

.call-to-action .icon {
	color: var(--icon-color);
	font-size: var(--text-2xl);
}

.call-to-action .content {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.call-to-action .title {
	font-family: var(--title-font-family);
	line-height: 1;
	font-weight: 400;
	color: var(--black);
	font-size: 1.625rem;
}

.call-to-action .subtitle {
	font-family: var(--subtitle-font-family);
	font-weight: 600;
	color: var(--black);
	font-size: 0.6875rem;
	letter-spacing: 0.2em;
	line-height: 1.4;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	gap: 9px;

	.prefixed-line {
		width: 40px;
		height: 2px;
		background: var(--green);
		display: block;

		.cta-container > div:nth-child(2) & {
			background: var(--peach);
		}
		.cta-container > div:nth-child(3) & {
			background: var(--blue);
			opacity: 0.4;
		}
	}
}

.call-to-action .read-more {
	font-size: var(--text-xs);
}
@media (min-width: 64em) and (max-width: 89.9375em) {
	.call-to-action .inner {
		padding-inline: 15% var(--space-2);

		&:before {
			width: 40px;
		}
	}
}
@media screen and (min-width: 90em) {
	.call-to-action .title {
		font-size: var(--text-3xl);
	}

	.call-to-action .subtitle {
		font-size: 0.8125rem;
	}

	.call-to-action .read-more {
		font-size: var(--text-sm);
	}
	.call-to-action .inner {
		padding: 27px var(--space-5) 23px 126px;

		&:before {
			width: 100px;
			background-size: contain;
			background-position: right;
		}
	}
	.call-to-action .content {
		gap: 13px;
	}
}