.c-card {
	position: relative;
	text-decoration: none;
	overflow: hidden;

	&::after {
		content: '';
		position: absolute;
		z-index: 0;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		display: block;
		background: linear-gradient(palette(neutral, 500), palette(neutral, 800));
		opacity: 0;
		transition: opacity 250ms linear;
	}

	&:hover {
		cursor: pointer;
		color: palette(neutral, 0);

		&::after {
			opacity: 0.5;
		}
	}
}


.c-card__image {
	display: block;
	transition: transform 250ms ease-out;

	.c-card:hover & {
		transform: scale(1.1);
	}
}


.c-card__label {
	position: absolute;
	z-index: 1;
	max-width: 95%; // so we always see a bit of the image on the edge
	left: 0;
	bottom: 0;
	height: space(6);
	display: inline-flex;
	text-decoration: none;
	color: palette(neutral, 700);
	background-color: palette(neutral, 0);
	transform-origin: bottom left;
}


.c-card__icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	color: palette(neutral, 0);
	background-color: palette(neutral, 700);
	transition: all 250ms ease-out;

	.c-card:hover & {
		background-color: palette(primary, 500);
	}
}


.c-card__text {
	@include font-weight(medium);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 space(3);
	color: currentColor;
	line-height: 1;
	transition: all 250ms ease-out;

	.c-card:hover & {
		color: palette(primary, 500);
	}
}