.pp-stakeholder-diagram {
	--pp-stakeholder-blue: #3a4d8f;
	--pp-stakeholder-teal: #5bbdbd;
	--pp-stakeholder-orange: #e08b65;
	--pp-stakeholder-track-height: clamp(0.5625rem, 2vw, 1rem);
	--pp-stakeholder-track-extend: 0.78;

	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: center;
	width: 100%;
	max-width: 52rem;
	margin: 0 auto;
}

.pp-stakeholder-diagram__tracks {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.pp-stakeholder-diagram__track {
	position: absolute;
	height: var(--pp-stakeholder-track-height);
	border-radius: 999px;
	transform: scaleX(0);
	transform-origin: left center;
	will-change: transform;
}

.pp-stakeholder-diagram__track--1 {
	background: linear-gradient(
		to right,
		var(--pp-stakeholder-blue),
		var(--pp-stakeholder-teal)
	);
}

.pp-stakeholder-diagram__track--2 {
	background: linear-gradient(
		to right,
		var(--pp-stakeholder-teal),
		var(--pp-stakeholder-orange)
	);
}

.pp-stakeholder-diagram__item {
	position: relative;
	justify-self: center;
	width: 92%;
	max-width: 14rem;
	margin: 0;
}

.pp-stakeholder-diagram__item--left {
	z-index: 1;
}

.pp-stakeholder-diagram__item--right {
	z-index: 2;
}

.pp-stakeholder-diagram__item--center {
	z-index: 3;
}

.pp-stakeholder-diagram__img {
	display: block;
	width: 100%;
	height: auto;
}

.pp-stakeholder-diagram--animate:not(.pp-stakeholder-diagram--animated)
	.pp-stakeholder-diagram__track {
	transform: scaleX(0);
}

.pp-stakeholder-diagram--animated .pp-stakeholder-diagram__track,
.pp-stakeholder-diagram:not(.pp-stakeholder-diagram--animate)
	.pp-stakeholder-diagram__track {
	transform: scaleX(1);
}

@media screen and (max-width: 768px) {
	.pp-stakeholder-diagram {
		grid-template-columns: 1fr;
		grid-template-rows: repeat(3, auto);
		max-width: 16rem;
	}

	.pp-stakeholder-diagram__item {
		width: 78%;
		max-width: 12rem;
	}

	.pp-stakeholder-diagram__track {
		width: var(--pp-stakeholder-track-height);
		height: auto;
		min-height: 0;
		transform: scaleY(0);
		transform-origin: center top;
	}

	.pp-stakeholder-diagram__track--1 {
		background: linear-gradient(
			to bottom,
			var(--pp-stakeholder-blue),
			var(--pp-stakeholder-teal)
		);
	}

	.pp-stakeholder-diagram__track--2 {
		background: linear-gradient(
			to bottom,
			var(--pp-stakeholder-teal),
			var(--pp-stakeholder-orange)
		);
	}

	.pp-stakeholder-diagram--animate:not(.pp-stakeholder-diagram--animated)
		.pp-stakeholder-diagram__track {
		transform: scaleY(0);
	}

	.pp-stakeholder-diagram--animated .pp-stakeholder-diagram__track,
	.pp-stakeholder-diagram:not(.pp-stakeholder-diagram--animate)
		.pp-stakeholder-diagram__track {
		transform: scaleY(1);
	}
}