.card {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;

	@if $useBorderRadius { border-radius: $sp-3;}

	&-bg {
		padding: $sp-4;
	}

	&-img {
		overflow: hidden;
		@if $useBorderRadius { border-radius: $sp-3 $sp-3 0 0;}
	}

	&-body {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		padding: $sp-5;
		border: 1px solid $co-gray-80;

		@if $useBorderRadius { border-radius: 0 0 $sp-3 $sp-3;}
	}
}

.card-link {
	color: $text-color;
	text-decoration: none;

	&::after {
		content:"";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		opacity: 0;
		transform: translateZ(0);
		box-shadow: $shadow-sm-v;
		transition: opacity .3s linear;

		@if $useBorderRadius { border-radius: $sp-3;}
	}

	@include hover() {
		&::after { opacity: 1;}
	}
}