.c-card {
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: repeat(2, auto);
	align-items: center;
	height: 100%;
	color: palette(neutral, 0);
	text-decoration: none;
	cursor: pointer;
}


.c-card__picture {
	position: relative;
	width: 100%;
	grid-row: 1 / -1;
	grid-column: 1;
	z-index: 0;
	overflow: hidden;
	
	&::before {
	    content: '';
		position: absolute;
		z-index: 1;
	    top: 0;
	    bottom: 0;
	    right: 0;
	    left: 0;
		display: block;
		background-color: palette(primary, 600);
		opacity: 0.64;
		transition: opacity 300ms linear;

		.c-card:hover & {
			opacity: 0;
		}
	}
}


.c-card__img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	background-color: palette(neutral, 200);
	transition: all 300ms ease-out;

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


.c-card__title {
	@include font-size(xxl);
	@include font-weight(light);
	position: relative;
	z-index: 1;
	font-family: $font-mokoko;
	padding: 0 space(2);
	text-align: center;
	grid-row: 1;
	grid-column: 1;
	align-self: end;
	text-shadow: 0 0 4px rgba(0,0,0, 0.4);
	opacity: 1;
	transition: all 300ms ease-out;

	.c-card:hover & {
		opacity: 0;
		transform: translateY(-70%) scale(1.1);
	}

}


.c-card__subtitle {
	@include font-size(base);
	@include font-weight(extra-bold);
	grid-row: 2;
	grid-column: 1;
	position: relative;
	z-index: 1;
	padding: 0 space(2);
	text-align: center;
	align-self: start;
	text-shadow: 0 0 4px rgba(0,0,0,0.5);
	transition: all 300ms ease-out;

	.c-card:hover & {
		opacity: 0;
		transform: translateY(-100%) scale(1.1);
	}
}


.c-card__arrow {
	grid-row: 2;
	grid-column: 1;
	position: relative;
	z-index: 1;
	display: flex;
	justify-self: center;
	align-items: center;
	width: 40px;
	height: 40px;
	padding: 10px;
	border-radius: 100%;
    border: 2px solid currentColor;
	transition: all 200ms;

	& > svg {
		transform: rotate(-0.25turn);
		transition: transform 200ms;
	}

	.c-card:hover & {
		cursor: pointer;
		color: palette(primary, 100);
		border-color: currentColor;
		background-color: rgba(palette(neutral, 0), 0.3);
		transform: scale(1.4) translateY(-24px);

		& > svg {
			transform: none;
		}
	}
}