.p4-projects-scroll {
	--p4-card-width: 47vw;
	--p4-card-gap: 2vw;
	position: relative;
	height: 100svh;
	background: #000;
	color: #fff;
}

.p4-projects-stage {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 68%) minmax(0, 30%);
	column-gap: var(--p4-card-gap);
	width: 100%;
	height: 100svh;
	overflow: hidden;
}

.p4-projects-images {
	position: relative;
	min-width: 0;
	height: 100%;
	overflow: hidden;
	touch-action: pan-y;
	cursor: grab;
}

.p4-projects-images.is-dragging { cursor: grabbing; }

.p4-projects-rail {
	display: flex;
	flex-direction: row-reverse;
	gap: var(--p4-card-gap);
	width: max-content;
	height: 100%;
	align-items: center;
	transform: translate3d(0, 0, 0);
	opacity: 0;
	transition: transform 700ms cubic-bezier(.22, 1, .36, 1);
	will-change: transform;
}

.p4-projects-images.is-ready .p4-projects-rail { opacity: 1; }
.p4-projects-images.is-resetting .p4-projects-rail { transition: none; }

.p4-projects-images.is-dragging .p4-projects-rail { transition: none; }

.p4-projects-card {
	position: relative;
	flex: 0 0 var(--p4-card-width);
	width: var(--p4-card-width);
	height: 84%;
	overflow: hidden;
	border-radius: 15px;
	background: #1d1d1d;
	opacity: .5;
	transition: opacity 500ms ease;
}

.p4-projects-card.is-current { opacity: 1; }

.p4-projects-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	user-select: none;
	-webkit-user-drag: none;
}

.p4-projects-category {
	position: absolute;
	top: 28px;
	left: 28px;
	padding: 5px 22px;
	border: 1px solid currentColor;
	border-radius: 100px;
	color: #fff;
	font: inherit;
	line-height: 1.1;
}

.p4-projects-copy {
	position: relative;
	align-self: end;
	min-width: 0;
	padding: 0 2vw 8svh 0;
}

.p4-projects-panel {
	position: absolute;
	inset: auto 2vw auto 0;
	opacity: 0;
	pointer-events: none;
}

.p4-projects-panel.is-active {
	position: relative;
	inset: auto;
	opacity: 1;
	pointer-events: auto;
}

.p4-projects-rise {
	display: block;
}

.p4-projects-rise .p4-gsap-word,
.p4-projects-rise .p4-gsap-line {
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

.p4-projects-eyebrow {
	margin-bottom: 18px;
	color: #e70000;
	font-family: "Archia", sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: .83;
	text-transform: uppercase;
}

.p4-projects-title {
	margin: 0 0 20px;
	font-family: "Podium Sharp", sans-serif;
	font-size: 128px;
	font-weight: 700;
	line-height: .83;
	letter-spacing: 0;
	text-transform: uppercase;
}

.p4-projects-description {
	margin: 0;
	max-width: 34ch;
	font-family: "Archia", sans-serif;
	font-size: var(--e-global-typography-text-font-size, inherit);
	font-weight: var(--e-global-typography-text-font-weight, inherit);
	line-height: 1.4;
	white-space: pre-line;
}

.p4-projects-detail {
	padding-right: 44px;
}

.p4-projects-next {
	position: absolute;
	right: 2vw;
	top: 8svh;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
	appearance: none;
}

.p4-projects-next svg { transition: transform 250ms ease; }
.p4-projects-next,
.p4-projects-next:hover,
.p4-projects-next:focus,
.p4-projects-next:focus-visible,
.p4-projects-next:active {
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: 0 !important;
	color: #fff;
}
.p4-projects-next:hover svg { transform: translateX(5px); }
.p4-projects-next:focus-visible svg { filter: drop-shadow(0 0 3px #fff); }

@media (max-width: 1024px) {
	.p4-projects-scroll { --p4-card-width: 90vw; --p4-card-gap: 4vw; height: auto; }
	.p4-projects-stage { display: flex; flex-direction: column; height: auto; overflow: visible; }
	.p4-projects-copy { order: 0; flex: 0 0 auto; align-self: stretch; padding: 36px 5vw 0; }
	.p4-projects-panel { inset: auto 5vw; }
	.p4-projects-panel.is-active { margin-top: 0; }
	.p4-projects-eyebrow { margin-bottom: 18px; font-size: 14px; line-height: 1; }
	.p4-projects-title { margin-bottom: 22px; font-size: clamp(58px, 16vw, 78px); line-height: .84; }
	.p4-projects-detail { padding-right: 0; }
	.p4-projects-description { max-width: none; font-size: 15px; line-height: 1.32; }
	.p4-projects-next { top: 36px; right: 5vw; width: 32px; height: 32px; }
	.p4-projects-images { order: 1; width: 90vw; height: auto; margin: 20px auto 32px; }
	.p4-projects-rail { height: auto; align-items: stretch; }
	.p4-projects-card { height: auto; aspect-ratio: 5 / 6; border-radius: 6px; }
	.p4-projects-category { top: 14px; left: 8px; padding: 3px 14px; font-size: 10px; }
}

@media (min-width: 768px) and (max-width: 1024px) {
	.p4-projects-scroll { --p4-card-width: min(77vw, 680px); --p4-card-gap: 3vw; }
	.p4-projects-copy { width: min(90vw, 760px); margin: 0 auto; padding: 48px 0 0; }
	.p4-projects-title { font-size: clamp(76px, 10vw, 108px); }
	.p4-projects-description { font-size: 18px; line-height: 1.35; }
	.p4-projects-next { top: 48px; right: max(5vw, calc((100vw - 760px) / 2)); width: 40px; height: 40px; }
	.p4-projects-images { width: min(77vw, 680px); margin: 28px auto 48px; }
	.p4-projects-card { aspect-ratio: 1; }
}


@media (prefers-reduced-motion: reduce) {
	.p4-projects-rail { will-change: auto; transition: none; }
	.p4-projects-card { transition: none; }
	.p4-projects-rise, .p4-projects-panel.is-active .p4-projects-rise { opacity: 1; transform: none; transition: none; }
	.p4-projects-next svg { transition: none; }
}