.c-cta-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	height: 100%;


	// Check if clip path is supported
	// If so we add the top and bottom shape
	@supports (clip-path: inset(50%)) {
		&::before,
		&::after {
			content: '';
			display: block;
			background-color: palette(primary, 500);
			padding-bottom: 29.607%;
			width: 100%;
			// Extra polygon points for preventing subpixel rounding issues
			clip-path: polygon(50% 0%, 0% 100%, 0% 100%, 100% 100%, 100% 100%);
			transform: translateY(1px);
		}

		&::after {
			background-color: palette(primary, 700);
			clip-path: polygon(50% 100%, 0% 1px, 0% 0%, 100% 0%, 100% 1px);
			transform: translateY(-1px);
		}
	}
}

.c-cta-card__content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%; // needed for IE
	background: linear-gradient(palette(primary, 500), palette(primary, 700));
	padding: space(6) space(3);

	@include mq(l){
		padding: space(6);
	}
}

.c-cta-card__lead {
	@include text-style(4);
	padding-bottom: space(3);
	color: palette(neutral, 0);
}

.c-cta-card__action {
}