$c-card-image-size: 144px;
$c-card-gutter: space(6);

.c-card {
	width: 100%;
	max-width: 360px;
	display: flex;
	flex-direction: column;

	&[href] {
		text-decoration: none;
	}
}


.c-card__image {
	border-radius: 500px;
	width: $c-card-image-size;
	height: $c-card-image-size;
	margin-left: $c-card-gutter;
	position: relative;
	z-index: 1;
	overflow: hidden;
	background-color: scale_color(palette(tertiary, 100), $lightness: 20%);
}


.c-card__body {
	flex: auto;
	display: flex;
	flex-direction: column;
	position: relative;
	z-index: 0;
	margin-top: halve(-$c-card-image-size);
	padding: (halve($c-card-image-size) + space(5)) $c-card-gutter $c-card-gutter;
	background-color: palette(secondary, 100);
	transition: all 150ms linear;

	.c-card[href]:hover & {
		background-color: scale_color(palette(secondary, 100), $lightness: -4%);
		box-shadow:
			0 1.9px 2.7px -8px rgba(0, 0, 0, 0.019),
			0 4.9px 6.9px -8px rgba(0, 0, 0, 0.029),
			0 9.9px 14.2px -8px rgba(0, 0, 0, 0.037),
			0 20.4px 29.2px -8px rgba(0, 0, 0, 0.047),
			0 56px 80px -8px rgba(0, 0, 0, 0.07)
	;
	}
}


.c-card__header {
	margin-bottom: space(2);
}


.c-card__title {
	@include font-size(l);
	color: palette(tertiary, 400);
}


.c-card__title--dark {
	color: palette(primary, 700);
}


.c-card__subtitle {
	@include font-size(s);
	color: palette(tertiary, 400);
}


.c-card__content {
	color: palette(primary);

	&:not(:last-child){
		margin-bottom: space(2);
	}
}


.c-card__content--quote {
	quotes: '\201c' '\201d';
	&::before { content: open-quote; }
	&::after  { content: close-quote; }
}


.c-card__action {
	margin-top: auto;
}


// Modifier for centering content
.c-card--center {
	text-align: center;

	.c-card__image {
		margin: auto;
	}
}