// card component

.c-card {
	position: relative;
	display: block;
	text-decoration: none;
	transition: transform 200ms ease-out;

	&:hover {
		transform: scale(1.04) translate3d(0, 0, 0);
	}

	// Check if clip path is supported
	// If so we add the bottom shape and shadow
	@supports (clip-path: inset(50%)) {
		&::after {
			content: '';
			display: block;
			background: white;
			padding-bottom: 29.607%;
			// Extra polygon points for preventing subpixel rounding issues
			clip-path: polygon(50% 100%, 0% 1px, 0% 0%, 100% 0%, 100% 1px);
			transform: translateY(-1px);
		}
		// Shadow
		&::before {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			display: block;
			padding-bottom: 50%;
			width: 50%;
			background: transparent;
			border-radius: 40px;
			box-shadow: 0 0 50px -10px rgba(0, 0, 0, 0.5);
			transform-origin: right bottom;
			transform: matrix(0.9, 0.52, -0.9, 0.52, 0, -2);
			transition: box-shadow 200ms ease-out;
		}

		&:hover::before {
			box-shadow: 0 0 50px -15px rgba(0, 0, 0, 0.4);
		}
	}
}

.c-card__image {
	position: relative;
	z-index: 1;
	height: 0;
	padding-bottom: 86.111%;
	clip-path: polygon(50% 0%, 0% 33.17%, 0% 100%, 100% 100%, 100% 33.17%);
	background-color: lightgrey;
	overflow: hidden;

	& img {
		transform: scale(1.04);
		transition: transform 200ms ease-out;
	}

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

.c-card__content {
	position: relative;
	z-index: 1;
	padding: space(3) space(3) 0 space(3);
	background: white;
	text-align: center;

	// Fallback for Legacy browsers
	padding-bottom: space(3);
	box-shadow: 0 30px 50px -35px rgba(0, 0, 0, 0.5);

	@supports (clip-path: inset(50%)) {
		padding-bottom: 0;
		box-shadow: none;
	}
}

.c-card__label {
	@include text-style(5);
	color: palette(secondary, 500);
}

.c-card__title {
	@include text-style(4);
	@include font-size(base, 24);
	color: palette(text, 800);
}

.c-card__action {
	margin-top: space(3);
}


.o-card-grid__footer {
	margin-top: space(2);
	margin-bottom: space(5);
}