.c-card {
	width: 100%;
	height: 100%;

	&[href] {
		display: block;
		text-decoration: none;
		color: currentColor;
	}
}

.c-card__image {
	margin-bottom: 50px;
	text-align: center;

	.c-card--customer-story & {
		filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
		filter: gray;
		-webkit-filter: grayscale(100%);
		max-width: 165px;
		margin-left: auto;
		margin-right: auto;
	}
}

.c-card__icon {
	margin-top: 8px;
	margin-bottom: 32px;
}

.c-card__token {
	margin-bottom: 30px;
	font-size: 0;
	line-height: 0;
}

.c-card__token--medium {
	margin-bottom: 16px;
}

.c-card__title {
	//@include font(mid, 28, 700);
	@include font(sm-large, 32, 700);
	color: palette(secondary);
}

.c-card__body {
	margin-top: 13px;
	color: palette(text, 700);
	//@include font(mid, 28);

	&.is-large {
		@include font(large, 38);

		.c-card--customer-story & {
			@include font(mid-large, 44);
		}
	}


}



.c-card__action {
	margin-top: 30px;

	.c-text-button__text {
		@include font(m-base, 20);
	}
}

// Modifier for creating a visual boxed-off card
.c-card--box {
	@include border-radius(large);
	@include box-shadow(high);
	background-color: palette(light);
	width: 100%;
	padding: 45px;
	text-align: center;

	* + .c-card__title {
		margin-top: 30px;
	}

	.c-card__body {
		&.is-large {
			@include font(large, 38);
			text-align: left;
		}
	}

	.c-card__action {
		margin-top: 44px;
	}

	&.c-card--customer-story  {
		text-align: left;

		.c-card__body {
			@include font-size(sm-large);
			line-height: 1.5;
		}
	}
}

.c-card--shadow {
	@include border-radius(large);
	box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);
	background-color: palette(light);
	cursor: pointer;
	overflow: hidden;

	transition: background-color .4s, box-shadow .4s;

	.c-card__title {
		margin-bottom: 16px;
	}

	.c-card__description {
		@include font-size(16);
		line-height: 1.6;
	}

	.c-card__description--large {
		@include font-size(18);
		line-height: 28.8px;
	}

	.c-card__image {
		position: relative;
		margin-bottom: 0;
		width: 100%;
		height: 0;
		padding-bottom: 66.67%;
	}

	.c-card__img {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-size: cover;
		background-position: center;
	}

	.c-card__body {
		margin-top: 0;
		padding: 20px;

		@include mq(400) {
			padding: 40px;
		}
	}

	&:hover {
		background-color: palette(secondary, 75);
		box-shadow: 0px 100px 80px rgba(91, 91, 91, 0.07),
		0px 30.1471px 24.1177px rgba(91, 91, 91, 0.0456112),
		0px 12.5216px 10.0172px rgba(91, 91, 91, 0.035),
		0px 4.5288px 3.62304px rgba(91, 91, 91, 0.0243888);
	}
}

// Modifier for centering the image & the action button
.c-card--center {
	& .c-card__token,
	& .c-card__action {
		@include flex(center);
	}
}

.c-card--usp {
	position: relative;
	padding-left: 30px;

	&::before {
		content: '';
		display: block;
		position: absolute;
		left: 0;
		top: 6px;
		width: 16px;
		height: 14px;
		background-image: url('/img/check/checked.svg');
		background-size: cover;
	}

	.c-card__body {
		&.is-large {
			@include font(large, 38);
		}
	}
}

//card for double text component
.c-card--double-text {
	text-align: left;

	@media screen and (min-width: 800px) {
		margin-top: -45px;
	}
}