.site-footer [data-component="cid-28"] {
	margin-bottom: 0;
}

[data-component^="cid-"]:has(.cta) {
	container-type: inline-size;
	container-name: cta;
}

.cta {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

@supports not (container-type: inline-size) {
	@media(min-width: 36em) {
		.cta {
			margin: auto;
			grid-template-columns: 196px auto;
		}
	}
}

@supports(container-type: inline-size) {
	@container cta (width >= 36em) {
		.cta {
			margin: auto;
			grid-template-columns: 196px auto;
		}
	}
}

.cta .media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--blue-30);
	overflow: hidden;
}

.site-footer .cta .media {
	background-color: var(--color-secondary);
}

.cta:has(figure.media) .media {
	padding: 1.5rem 2rem 3rem 2rem;
}

@supports not (container-type: inline-size) {
	@media(min-width: 37.5em) {
		.cta:has(figure.media) .media {
			padding: 1rem 2.5rem 1rem 2rem;
		}
	}
}

@supports(container-type: inline-size) {
	@container cta (width >= 36em) {
		.cta:has(figure.media) .media {
			padding: 1rem 2.5rem 1rem 2rem;
		}
	}
}

.cta:has(picture.media) .media {
	padding: 0;
}

.cta:has(figure.media) .media img {
	max-height: 175px;
}

.cta:has(picture.media) img {
	object-fit: cover;
	height: 100%;
	width: 100%;
}

.cta .media::after {
	content: "";
	margin: 0;
  width: 100%;
  height: 100%;
  display: inline-block;
  background-image: url(/assets/images/curve-horizontal--light.svg);
  background-repeat: no-repeat;
  background-position: center calc(100% + 85px);
	background-size: 700px;
	position: absolute;
	bottom: 0;
}

.site-footer .cta .media::after {
	background-image: url(/assets/images/curve-horizontal--primary.svg);
}

@supports not (container-type: inline-size) {
	@media(min-width: 36em) {
		.cta .media::after {
			margin: 0;
			width: 100%;
			height: 100%;
			display: inline-block;
			background-image: url(/assets/images/curve-vertical--light.svg);
			background-repeat: no-repeat;
			background-position: right calc(100% + -180px) center;
			background-size: 30%;
			position: absolute;
			right: 0;
			bottom: initial;
		}

		.site-footer .cta .media::after {
			background-image: url(/assets/images/curve-vertical--primary.svg);
		}
	}
}

@supports(container-type: inline-size) {
	@container cta (width >= 36em) {
		.cta .media::after {
			margin: 0;
			width: 100%;
			height: 100%;
			display: inline-block;
			background-image: url(/assets/images/curve-vertical--light.svg);
			background-repeat: no-repeat;
			background-position: right calc(100% + -180px) center;
			background-size: 30%;
			position: absolute;
			right: 0;
			bottom: initial;
		}

		.site-footer .cta .media::after {
			background-image: url(/assets/images/curve-vertical--primary.svg);
		}
	}
}

.cta .content {
	padding: 0.5rem 2rem 2rem 2rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	color: var(--black);
	background-color: var(--color-primary--light);
}

.site-footer .cta .content {
	color: var(--white);
	background-color: var(--color-primary);
}

@supports not (container-type: inline-size) {
	@media(min-width: 36em) {
		.cta .content {
			margin-top: 0;
			padding: 1rem 2rem 2rem 2rem;
			align-items: flex-start;
		}
	}
}

@supports(container-type: inline-size) {
	@container cta (width >= 36em) {
		.cta .content {
			margin-top: 0;
			padding: 1rem 2rem 2rem 2rem;
			align-items: flex-start;
		}
	}
}

@supports not (container-type: inline-size) {
	@media(min-width: 50em) {
		.cta .content {
			padding-right: 2rem;
		}
	}
}

@supports(container-type: inline-size) {
	@container cta (width >= 50em) {
		.cta .content {
			padding-right: 2rem;
		}
	}
}

@supports not (container-type: inline-size) {
	@media(min-width: 90em) {
		.cta .content {
			padding-right: 4rem;
		}
	}
}

@supports(container-type: inline-size) {
	@container cta (width >= 90em) {
		.cta .content {
			padding-right: 4rem;
		}
	}
}

.cta .content span {
	display: block;
	font: var(--s);
}

.cta .content h2 {
	margin-top: 1rem;
	margin-bottom: 0.5rem;
	font: var(--h3);
}

.cta .content h2 + p {
	margin-top: 0;
}

.cta a {
	margin-top: 0.5rem;
}