.card-contacts {
	--offset: #{$sp-4};
	padding: var(--offset);
	border-radius:  $border-radius-4;
	border: 1px solid $co-gray-80;
}

.card-team {
	--offset: #{$sp-4};
	overflow: hidden;
	position: relative;
	color: $co-base-1;
	border-radius: $border-radius-4;

	.is-caption {
		position: absolute;
		z-index: 3;
		inset: auto var(--offset) var(--offset);
		padding: var(--offset) calc(var(--offset) + .2rem);
		background: linear-gradient(to bottom, rgba($co-alpha, .8), rgba($co-alpha, .2));
		border-radius: $border-radius-3;
		box-shadow: inset 0 0 0 2px rgba($co-base-1, 0.3);
	}
}



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

@include mediaQ(sm) {
	.card-contacts {
		--offset: #{$sp-6};
	}

	.card-team {
		--offset: #{$sp-6};
	}
}