// links
@each $suf, $color in ('base-1': $co-base-1, 'text': $text-color) {
	.link-#{$suf} {
		color: $color;
		text-decoration: none;
		@include hover() {
			text-decoration: none;
			color: $color;
			opacity: .7;
		}
	}
}

.link {
	&-inverse {
		color: $text-color;
		text-decoration: none;
		@include hover() {
			color: $co-alpha;
			text-decoration-thickness: 1px;
		}
	}

	&-underline {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		@include hover() { text-decoration: none; }
	}

	&-h-underline {
		text-decoration: none;
		@include hover() {
			text-decoration: underline;
			text-decoration-thickness: 1px;
		}
	}

	&-skip {
		position: fixed;
		z-index: $z-index-header + 1;
		top: 0;
		left: 0;
		transform: translate(-200%,-200%);
		padding: $sp-2 $sp-3;
		color: $text-color;
		text-decoration: none;
		background-color: $co-gray-80;
		@if $useBorderRadius {
			border-bottom-right-radius: $sp-4;
		}
		&:hover {
			background-color: lighten($co-gray-80, 5%);
		}
		&:focus-visible {
			transform: translate(0,0);
			box-shadow: none;
		}
	}
}

.link-arrow-right {
	span {
		display: inline-block;
		align-content: center;
		vertical-align: middle;
		margin-left: $sp-3;
		width: 2.8rem;
		height: 2.8rem;
		text-align: center;
		border-radius: 50%;
		pointer-events: none;
		transform: rotate(0deg) scale(1);
		transition: transform 0.3s ease-in-out;
		.ico {
			opacity: .7;
		}
	}
	@include hover() {
		opacity: 1;
		span {
			transform: rotate(-45deg) scale(1.2);
		}
	}
}

.link-expand {
	position: relative;

	&-item:after {
		content:"";
		position: absolute;
		inset: 0;
		z-index: 10;
		cursor: pointer;
	}

	&-sec {
		position: relative;
		z-index: 20;
	}

	@include hover() {
		.img-link-opacity .img-link-media img {
			opacity: .7;
		}

		.img-link-zoom .img-link-media img {
			@include imageZoomEndEffect;
		}
	}

}

// text
.text-columns {
	columns: 25rem 3;
	// column-rule: 1px solid $co-gray-70;
	column-gap: $sp-6;
	> :last-child { margin-bottom: 0 !important;}
}

.title-bit {
	display: inline-block;
	border: 1px solid;
	padding: $sp-2 $sp-5;
	border-radius: 10rem;
}

// icons
.ico {
	display: inline-block;

	@at-root svg#{&} {
		width: 1em;
		height: 1em;
		fill: currentColor;
		vertical-align: middle;
		position: relative;
		top: -0.05em;
	}

	&-spin {
		animation: Spin 2s infinite linear;
	}
}

// list
.list-unstyled {
	margin: 0;
	padding: 0;
	list-style: none;
}

.list-ico {
	list-style: none;
	padding: 0;

	> li {
		position: relative;
		padding-left: $sp-5 + .4;

		> .ico {
			position: absolute;
			top: 0;
			left: 0;
			&[class*="fa-"] { top: 0.2em;}
		}
		> svg.ico {
			top: .3em;
		}
	}
}

.list-symbol {
	> li:not(:last-child) {
		margin-right: $sp-2;
		&::after {
			content: attr(data-symbol);
		}
	}
}

.list-contacts {
	&-info {
		text-align: center;

		.is-title { margin-bottom: 0;}
	}
}

// media responsive
.ratio {
	position: relative;
	width: 100%;

	> img,
	> video,
	> iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	&-4x3  { padding-top: 75%;}
	&-16x9 { padding-top: 56.25%;}
	// &-21x9 { padding-top: 42.8571428571%;}
}

// shadows
.shadow {
	position: relative;
	min-height: 1px;
	&:after {
		content:"";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: $sp-4;
		max-width: $content-max-width;
		margin-left: auto;
		margin-right: auto;
		pointer-events: none;
		background: radial-gradient(ellipse at top, rgba(#000, .15), transparent 70%);
	}
}

.team {
	position: relative;
	padding: $sp-lg-3 0 $sp-lg-2;

	&:after {
		content:"";
		position: absolute;
		z-index: -1;
		inset: 0;
		background-color: $co-gray-90;
		box-shadow: -10rem 0 0 $co-gray-90, 10rem 0 0 $co-gray-90;
	}

	&-user {
		position: relative;
		> img {
			border-radius: $border-radius-6;
		}
		&-logo {
			position: absolute;
			bottom: $sp-6;
			right: $sp-6;
			padding: $sp-5 $sp-7;
			border-radius: $border-radius-6;
			background-color: rgba($co-base-1, .5);
			backdrop-filter: blur(4px);
			border: 1px solid $co-gray-80;
			transform: scale(0.7);
			transform-origin: bottom right;
		}
	}
}


@include mediaQ(sm) {
	.list-contacts {
		&-info {
			text-align: left;
			display: grid;
			grid-template-columns: max-content max-content;
			gap: 0 $gutter;
			width: max-content;
			margin-left: auto;
			margin-right: auto;

			.is-body {
				position: relative;
				padding-left: $sp-6;
				.ico {
					position: absolute;
					left: 0;
					top: 0.2em;
				}
			}
		}
	}

	.team {
		&-user {
			&-logo {
				right: -$sp-6;
				bottom: $sp-7;
			}
		}
	}
}

@include mediaQ(lg) {
	.team {
		&-user {
			&-logo {
				transform: scale(1);
				right: -150px;
				bottom: 80px;
			}
		}

		&-col-img {
			width: 43%;
		}
		&-col-content {
			width: 57%;
			opacity: .7;
			padding-left: 12rem;
		}
	}
}