.gf-related.gf-related-slider {
	--gf-related-slant: clamp(34px, 5vw, 96px);
	--gf-related-caption-inset: clamp(10px, 1.5vw, 24px);
	--gf-related-slide-width: 20%;
	background: #000;
}
.gf-related-slider .gf-related-viewport {
	position: relative;
	z-index: 1;
	overflow-x: auto;
}
.gf-related-slider .gf-related-viewport--initialized { overflow: hidden; }
.gf-related-slider .gf-related-viewport--pointer-events { touch-action: pan-y pinch-zoom; }
.gf-related-slider .gf-related-grid {
	position: relative;
	display: flex;
	width: 100%;
	transition-property: transform;
	box-sizing: content-box;
}
.gf-related-slider .gf-related-slide {
	position: relative;
	flex: 0 0 auto;
	width: var(--gf-related-slide-width);
}
.gf-related-slider .gf-related-notification {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	opacity: 0;
	pointer-events: none;
}
.gf-related-slider .gf-related-grid > li .gf-related-card {
	width: calc(100% + var(--gf-related-slant));
	margin-inline-start: 0;
	clip-path: polygon(var(--gf-related-slant) 0, 100% 0, calc(100% - var(--gf-related-slant)) 100%, 0 100%);
}
.gf-related-slider .gf-related-viewport:not(.gf-related-viewport--initialized) li:first-child .gf-related-card {
	clip-path: polygon(0 0, 100% 0, calc(100% - var(--gf-related-slant)) 100%, 0 100%);
}
.gf-related-slider .gf-related-grid > li .gf-related-caption {
	padding-inline-start: calc(var(--gf-related-caption-inset) + var(--gf-related-slant) * 0.16);
	padding-inline-end: calc(var(--gf-related-caption-inset) + var(--gf-related-slant));
}
.gf-related-slider .gf-related-step {
	position: absolute;
	z-index: 2;
	top: 50%;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgb(255 255 255 / 65%);
	border-radius: 50%;
	background: #fff;
	color: #171717;
	transform: translateY(-50%);
	cursor: pointer;
}
.gf-related-slider .gf-related-step[hidden] { display: none; }
.gf-related-slider .gf-related-step:hover { background: #eee; }
.gf-related-slider .gf-related-step:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.gf-related-slider .gf-related-prev { inset-inline-start: clamp(8px, 1.5vw, 24px); }
.gf-related-slider :is(.gf-related-next, .gf-related-autoplay) { inset-inline-end: clamp(8px, 1.5vw, 24px); }
.gf-related-slider .gf-related-autoplay {
	top: 12px;
	transform: none;
}
.gf-related-slider .gf-related-autoplay[aria-pressed="false"] .gf-related-pause-icon,
.gf-related-slider .gf-related-autoplay[aria-pressed="true"] .gf-related-play-icon { display: none; }

.gf-related.gf-related-slider--rounded {
	--gf-related-tilt: 14deg;
	--gf-related-slant: calc(var(--gf-related-card-height) / 4);
	--gf-related-gap: clamp(8px, 0.8vw, 16px);
	--gf-related-radius: clamp(12px, 1.1vw, 22px);
}
.gf-related-slider--rounded .gf-related-viewport { padding-block: clamp(6px, 0.45vw, 9px); }
.gf-related-slider--rounded .gf-related-grid > li .gf-related-card,
.gf-related-slider--rounded .gf-related-viewport:not(.gf-related-viewport--initialized) li:first-child .gf-related-card {
	width: calc(100% - var(--gf-related-gap));
	margin-inline-start: calc(var(--gf-related-gap) / 2);
	border-radius: var(--gf-related-radius);
	clip-path: none;
	transform: skewX(calc(0deg - var(--gf-related-tilt)));
	transform-origin: bottom;
}
/* Counter the card's slant so photos and text keep their original proportions. */
.gf-related-slider--rounded .gf-related-card img {
	width: calc(100% + var(--gf-related-slant));
	max-width: none;
	transform: skewX(var(--gf-related-tilt));
	transform-origin: bottom;
}
.gf-related-slider--rounded .gf-related-grid > li .gf-related-caption {
	padding-inline: var(--gf-related-caption-inset);
	transform: skewX(var(--gf-related-tilt));
	transform-origin: bottom;
}
@media (prefers-reduced-motion: no-preference) {
	.gf-related-slider--rounded.is-visible .gf-related-card img { animation-name: gf-related-rounded-enter; }
	@keyframes gf-related-rounded-enter {
		from { opacity: 0.48; transform: skewX(var(--gf-related-tilt)) scale(1.07); }
	}
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.gf-related-slider--rounded .gf-related-grid > li .gf-related-card:hover .gf-related-caption {
		transform: skewX(var(--gf-related-tilt)) translateY(-4px);
	}
}
@media (max-width: 860px) {
	.gf-related.gf-related-slider {
		--gf-related-card-height: clamp(170px, 50vw, 230px);
		--gf-related-slide-width: 86%;
		--gf-related-slant: clamp(20px, 7vw, 50px);
	}
	.gf-related.gf-related-slider--rounded {
		--gf-related-tilt: 8deg;
		--gf-related-slant: calc(var(--gf-related-card-height) * 0.15);
	}
	.gf-related-slider .gf-related-grid > li .gf-related-card { grid-template-rows: minmax(0, 1fr) 50px; }
	.gf-related-slider .gf-related-step { width: 40px; height: 40px; }
}