.card {
	position: relative;

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

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

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

	&-body {
		padding: $sp-4;
		@if $useBorderRadius { border-radius: 0 0 $sp-3 $sp-3;}
	}

	&-info {
		&-footer {
			padding-top: $sp-3;
			margin-top: $sp-1;
			border-top: 1px solid $co-gray-70;
		}
	}
}

.card-info-action {
	display: flex;
	flex-direction: column;
	gap: $sp-4;
}

/* .card-link {
	color: $text-color;

	&::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;}
	}
} */

@include mediaQ(sm) {
	.card {
		&-bg {
			padding: $sp-6;
		}
	}
}

@include mediaQ(md) {
	.card-info-action {
		flex-direction: row;
		align-items: center;
		.card-info {
			flex-grow: 1;
		}
		.card-action {
			margin-top: $sp-2;
		}
	}
}