.activation-carousel {
	position: relative;
	width: 100%;
	aspect-ratio: 1920 / 1092;
	overflow: hidden;
	background: #f3f3f3;
	color: #0a0a0a;
	container-type: inline-size;
	font-family: "Mulish", sans-serif;
}

.activation-carousel__viewport {
	position: absolute;
	inset: 30.2198% 0 auto;
	height: 40.3846%;
	overflow-x: auto;
	overflow-y: hidden;
	padding-inline: 9.0625cqw 7.9167cqw;
	clip-path: inset(0 7.9167cqw 0 9.0625cqw);
	scrollbar-width: none;
	scroll-padding-left: 9.0625cqw;
	scroll-snap-type: x mandatory;
	touch-action: pan-y;
	cursor: grab;
}

.activation-carousel__viewport::-webkit-scrollbar {
	display: none;
}

.activation-carousel__viewport:focus-visible {
	outline: 3px solid #0a0a0a;
	outline-offset: -3px;
}

.activation-carousel__viewport.is-dragging {
	scroll-snap-type: none;
	cursor: grabbing;
	user-select: none;
}

.activation-carousel__track {
	display: flex;
	width: max-content;
	height: 100%;
	gap: 1.3542cqw;
}

.activation-carousel__slide {
	width: 40.8333cqw;
	height: 100%;
	margin: 0;
	overflow: hidden;
	background: #e6e6e6;
	scroll-snap-align: start;
	flex: none;
}

.activation-carousel__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

.activation-carousel__slide:nth-child(3) img {
	object-position: center 58%;
}

.activation-carousel__controls {
	position: absolute;
	top: 76.3736%;
	left: 6.7708%;
	display: flex;
	width: 86.5104%;
	height: 3.125cqw;
	align-items: center;
}

.activation-carousel__controls > span {
	height: 1px;
	background: #0a0a0a;
	flex: 1;
}

.activation-carousel__controls button {
	position: relative;
	width: 6.0417cqw;
	height: 3.125cqw;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	flex: none;
}

.activation-carousel__controls button::after {
	position: absolute;
	top: 50%;
	width: 0;
	height: 0;
	border-block: 0.3125cqw solid transparent;
	content: "";
	transform: translateY(-50%);
}

.activation-carousel__previous::after {
	left: 3.0729cqw;
	border-right: 0.5208cqw solid #0a0a0a;
}

.activation-carousel__next::after {
	right: 0;
	border-left: 0.5208cqw solid #0a0a0a;
}

.activation-carousel__controls button:focus-visible {
	outline: 2px solid #0a0a0a;
	outline-offset: -2px;
}

.activation-carousel__controls button:disabled {
	opacity: 0.28;
	cursor: default;
}

@media (prefers-reduced-motion: reduce) {
	.activation-carousel__viewport {
		scroll-behavior: auto;
	}
}

@media (max-width: 767px) {
	.activation-carousel {
		aspect-ratio: auto;
		padding: 48px 0;
	}

	.activation-carousel__viewport {
		position: relative;
		inset: auto;
		height: 46.125vw;
		padding-inline: 9vw;
		clip-path: inset(0 9vw);
		scroll-padding-left: 9vw;
	}

	.activation-carousel__track {
		gap: 4vw;
	}

	.activation-carousel__slide {
		width: 82vw;
	}

	.activation-carousel__slide {
		background: #e6e6e6;
	}

	.activation-carousel__controls {
		position: relative;
		top: auto;
		left: auto;
		width: 82%;
		height: 48px;
		margin: 30px auto 0;
	}

	.activation-carousel__controls button {
		width: 52px;
		height: 48px;
	}

	.activation-carousel__controls button::after {
		border-block-width: 5px;
	}

	.activation-carousel__previous::after {
		left: 0;
		border-right-width: 8px;
	}

	.activation-carousel__next::after {
		right: 0;
		border-left-width: 8px;
	}
}