.supt-card-contact {
	@extend %t-body-s;
	@mixin clamp padding-block, $spacing-5, $spacing-6, $breakpoint-xs, $breakpoint-xl;
	@mixin clamp gap, $spacing-1-5, $spacing-2, $breakpoint-xs, $breakpoint-xl;
	padding-inline: $spacing-3;
	border-top: 1px solid $color-grey-2;
	border-bottom: 1px solid $color-grey-2;
	display: flex;
	flex-direction: column;

	& + & {
		border-top: none;
	}

	h3 {
		@extend %t-body-sm;
		margin: 0;
		font-weight: $font-weight-medium;
	}

	a {
		@extend %t-body-s;
		font-weight: $font-weight-medium;
		@mixin clamp gap, $spacing-1-5, $spacing-2, $breakpoint-xs, $breakpoint-xl;
		display: flex;
		align-items: center;
		gap: $spacing-2;
		color: $color-main;

		svg {
			flex-shrink: 0;
			width: 14px;
			height: 14px;
		}

		span {
			@extend %link-underline;
			background-position: 0 calc(100% - 3px);

			&:hover,
			&:focus-visible {
				background-position: 100% calc(100% - 3px);
			}
		}

		&:focus {
			outline: none;
		}

		&:focus-visible {
			color: $color-medium;
		}
	}
}