.alx-ts{
	--alx-panel-a:#1E2D50;
	--alx-panel-b:#2AA6E0;
	--alx-badge-a:#1250F2;
	--alx-badge-b:#2EA8FF;
	--alx-star:#FFC21A;
	--alx-nav:#0B1633;
	--alx-gap:56px;
	--alx-per:3;
	position:relative;
	font-family:"DM Sans",system-ui,sans-serif;
}
.alx-ts *{box-sizing:border-box}

/* viewport clips the sliding track but leaves room for the tilted panels */
.alx-ts__viewport{
	overflow:hidden;
	padding:64px 34px 46px;
	margin:0 -34px;
}
.alx-ts__track{
	display:flex;
	align-items:stretch;
	gap:var(--alx-gap);
	transition:transform .6s cubic-bezier(.22,.61,.36,1);
	will-change:transform;
}
.alx-ts__slide{
	flex:0 0 calc((100% - (var(--alx-per) - 1) * var(--alx-gap)) / var(--alx-per));
	display:flex;
}

/* card */
.alx-ts__card{
	position:relative;
	flex:1;
	display:flex;
}
.alx-ts__panel{
	position:absolute;
	top:-40px;
	right:-16px;
	bottom:76px;
	left:8px;
	border-radius:30px;
	background:linear-gradient(180deg,var(--alx-panel-a) 0%,#1F4170 48%,var(--alx-panel-b) 100%);
	transform:rotate(-3.5deg);
	transform-origin:50% 50%;
	z-index:0;
	transition:left .5s ease,right .5s ease,transform .5s ease;
}
.alx-ts__card:hover .alx-ts__panel{
	left:-16px;
	right:8px;
	transform:rotate(3.5deg);
}
.alx-ts__inner{
	position:relative;
	z-index:1;
	flex:1;
	display:flex;
	flex-direction:column;
	background:#fff;
	border-radius:30px;
	padding:58px 36px 30px;
	box-shadow:0 26px 54px rgba(29,91,255,.10),0 4px 14px rgba(15,23,42,.05);
	transition:transform .4s ease;
}
.alx-ts__card:hover .alx-ts__inner{transform:translateY(-4px)}

/* initials badge */
.alx-ts__badge{
	position:absolute;
	top:-40px;
	left:50%;
	transform:translateX(-50%);
	width:80px;
	height:80px;
	border-radius:50%;
	border:4px solid #fff;
	background:linear-gradient(135deg,var(--alx-badge-a) 0%,var(--alx-badge-b) 100%);
	box-shadow:0 10px 26px rgba(29,91,255,.35);
	color:#fff;
	font-weight:700;
	font-size:24px;
	line-height:1;
	letter-spacing:.5px;
	display:flex;
	align-items:center;
	justify-content:center;
}

.alx-ts__stars{display:flex;gap:4px;margin-bottom:14px}
.alx-ts__stars svg{width:24px;height:24px;fill:var(--alx-star)}

.alx-ts__text{
	flex:1;
	margin:0 0 22px;
	color:#3B4656;
	font-size:17px;
	line-height:1.6;
}
.alx-ts__name{
	border-top:1px solid #E6E9EF;
	padding-top:18px;
	color:#0B1633;
	font-weight:700;
	font-size:17px;
}

/* nav */
.alx-ts__nav{
	display:flex;
	justify-content:center;
	gap:16px;
	margin-top:6px;
}
.alx-ts__btn{
	width:56px;
	height:56px;
	border-radius:50%;
	border:0;
	padding:0;
	cursor:pointer;
	background:var(--alx-nav);
	display:flex;
	align-items:center;
	justify-content:center;
	box-shadow:0 8px 20px rgba(11,22,51,.25);
	transition:background .25s ease,transform .25s ease;
}
.alx-ts__btn:hover{background:#1D5BFF;transform:translateY(-2px)}
.alx-ts__btn svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:1024px){
	.alx-ts{--alx-per:2;--alx-gap:44px}
}
@media (max-width:767px){
	.alx-ts{--alx-per:1;--alx-gap:40px}
	.alx-ts__viewport{padding:60px 22px 40px;margin:0 -22px}
	.alx-ts__inner{padding:54px 26px 26px}
	.alx-ts__text{font-size:16px}
	.alx-ts__panel{right:-10px;left:10px}
	.alx-ts__card:hover .alx-ts__panel{left:-10px;right:10px}
}