.team-promo {
	min-height: 100dvh;
	padding-block: 140px 40px;
	background: url(../images/team/team2.webp) top center / 51vw auto no-repeat, url(../images/team/b1.webp) top center / 100% 100% no-repeat;
	h1 {
		margin: 0 auto 5px;
		font-size: 60px;
		font-weight: 700;
		letter-spacing: 0.2px;
		text-transform: uppercase;
		text-align: center;
		text-shadow: 0 44px 17px rgba(145, 64, 64, 0.03), 0 25px 15px rgba(0, 0, 0, 0.1), 0 11px 11px rgba(0, 0, 0, 0.17), 0 3px 6px rgba(0, 0, 0, 0.2);
	}
	.slider {
		--step: 4;
		max-width: initial;
		width: 60vw;
		.slides {
			position: relative;
			width: 100%;
			display: grid;
			justify-content: center;
			grid-template-columns: repeat(var(--step), 1fr);
			grid-template-rows: 1fr;
		}
		&.noAnimate .slide {
			transition: none;
		}
		.slide {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			grid-row: 1/2;
			transform: translate3d(0, 50px, 0);
			opacity: 0;
			pointer-events: none;
			transition: opacity var(--tz), transform var(--tz);
			&.active {
				transform: translate3d(0, 0, 0);
				opacity: 1;
				pointer-events: all;
				button {
					pointer-events: all;
				}
			}
			.image {
				position: relative;
				width: 100%;
				transform-origin: bottom center;
				transition: transform var(--tz);
				max-height: 100%;
				&::before {
					content: '';
					position: absolute;
					left: 0;
					bottom: 10px;
					width: 100%;
					height: 30px;
					background: radial-gradient(50% 50% at 50% 50%, #424242 0%, rgba(66, 66, 66, 0) 100%);
					filter: blur(30px);
					pointer-events: none;
				}
				img {
					position: relative;
					width: 100%;
					z-index: 1;
					filter: drop-shadow(-32px 27px 37px rgba(0, 0, 0, 0.25));
					margin: 0 auto;
				}
			}
			.title {
				margin-block: 10px 4px;
				font-size: 24px;
				font-weight: 500;
				letter-spacing: 0.2px;
				text-align: center;
				color: var(--white);
			}
			.post {
				margin-bottom: 6px;
				text-align: center;
				font-weight: 300;
				letter-spacing: 0.2px;
				opacity: .8;
				color: var(--white);
			}
			button {
				margin-top: auto;
				padding: 10px 40px;
				transform: translateY(80%);
				opacity: 0;
				pointer-events: none;
				transition: var(--tz);
			}
		}
		.controls {
			position: relative;
			width: fit-content;
			gap: 50px;
			z-index: 2;
			margin: 20px auto 0;
			.bubbles {
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 4px;
				button {
					position: relative;
					height: 4px;
					width: 40px;
					border: none;
					background-color: var(--white);
					&::before {
						content: '';
						position: absolute;
						left: 0;
						top: 50%;
						width: 100%;
						height: 20px;
						transform: translateY(-50%);
					}
					&.selected {
						background-color: var(--2);
					}
				}
			}
			.counter {
				display: none;
				align-items: center;
				justify-content: center;
				gap: 2px;
				min-width: 70px;
				opacity: .8;
				font-size: 16px;
				font-weight: 300;
				letter-spacing: 0.2px;
				color: var(--white);
				span {
					color: inherit;
					font-size: inherit;
					font-weight: inherit;
					letter-spacing: inherit;
				}
			}
			&:has(.bubbles button:nth-child(9)) {
				gap: 30px;
				.bubbles {
					display: none;
				}
				.counter {
					display: flex;
				}
			}
			.arrow-l,
			.arrow-r {
				background: none;
				border-color: var(--white);
				&::before {
					background: var(--white);
				}
				.text-h b {
					&:first-child {
						color: var(--white);
					}
					&:last-child {
						color: var(--2);
					}
				}
			}
		}
	}
}
@media (min-width: 1680px) {
	.team-promo {
		.slider .slide {
			&:nth-child(4n - 3) {
				grid-column: 1/2;
			}
			&:nth-child(4n - 2) {
				grid-column: 2/3;
			}
			&:nth-child(4n - 1) {
				grid-column: 3/4;
			}
			&:nth-child(4n) {
				grid-column: 4/5;
			}
			.image img {
				width: 90%;
			}
		}
	}
}
@media (max-width: 1680px) {
	.team-promo {
		padding-block: 120px 40px;
		background: url(../images/team/team2.webp) top center / 52vw 60vw no-repeat, url(../images/team/b1.webp) top center / 100% 100% no-repeat;
		h1 {
			font-size: 50px;
		}
		.slider {
			--step: 3;
			width: 50vw;
		}
	}
}
@media (min-width: 1280px) and (max-width: 1680px) {
	.team-promo .slider .slide {
		&:nth-child(3n - 2) {
			grid-column: 1/2;
		}
		&:nth-child(3n - 1) {
			grid-column: 2/3;
		}
		&:nth-child(3n) {
			grid-column: 3/4;
		}
	}
}
@media (min-width: 1280px) and (max-height: 900px) {
	.team-promo {
		background: url(../images/team/team2.webp) top center / 46vw 52vw no-repeat, url(../images/team/b1.webp) top center / 100% 100% no-repeat;
		padding-block: 120px 20px;
		h1 {
			font-size: 40px;
			margin-bottom: 0;
		}
		.slider {
			.slide {
				.image {
					img {
						width: 80%;
						margin: 0 auto;
					}
				}
				.title {
					font-size: 20px;
					margin-block: 0;
				}
			}
		}
	}
}
@media (max-width: 1280px) {
	.team-promo {
		background: url(../images/team/team22.webp) top center / 100vw 70vw no-repeat, url(../images/team/bg2.webp) top center / auto 100% no-repeat;
		.slider {
			--step: 2;
			.slide .title {
				font-size: 20px;
			}
			.controls {
				margin-top: 40px;
			}
		}
	}
}
@media (min-width: 769px) and (max-width: 1280px) {
	.team-promo {
		background: url(../images/team/team22.webp) top center / 95vw 97vw no-repeat, url(../images/team/bg2.webp) top center / auto 100% no-repeat;
		.slider {
			.slide {
				&:nth-child(2n - 1) {
					grid-column: 1/2;
				}
				&:nth-child(2n) {
					grid-column: 2/3;
				}
			}
			.controls {
				margin-top: 20px;
			}
		}
	}
}
@media (hover: none) and (pointer: coarse),
(max-width: 1080px) {
	.team-promo .slider .slide button {
		opacity: 1;
		transform: translateY(0);
	}
}
@media (max-width: 1080px) {
	.team-promo {
		padding-bottom: 20px;
		h1 {
			font-size: 30px;
		}
		.slider .slide .red-btn {
			height: 40px;
		}
	}
}
@media (max-width: 768px) {
	.team-promo {
		padding-block: 70px 10px;
		background: url(../images/team/team222.webp) top center / 100vmin auto no-repeat, url(../images/team/bg3.webp) top center / auto 100% no-repeat;
		h1 {
			font-size: 36px;
			line-height: 36px;
			margin-bottom: 0px;
		}
		.slider {
			--step: 1;
			width: 100%;
			.slides {
				margin-inline: auto;
				grid-template-columns: 1fr;
				width: max(170px, 50%);
			}
			.slide {
				grid-column: 1/2;
				.title {
					font-size: 20px;
				}
			}
		}
	}
}
@media (hover:hover) {
	.team-promo .slider .slide:hover {
		.image {
			transform: scale(1.016);
		}
		button {
			pointer-events: all;
			transform: translateY(0);
			opacity: 1;
		}
	}
}