.veo-orbit {
	--veo-height: 760px;
	--veo-card-width: 430px;
	--veo-card-height: 260px;
	--veo-radius: 5px;
	--veo-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--veo-transition: 820ms;
	--veo-center-z: 140px;
	--veo-center-scale: 1;
	--veo-side-x: -26px;
	--veo-side-y: 238px;
	--veo-side-z: -110px;
	--veo-side-scale: 0.78;
	--veo-hidden-x: -48px;
	--veo-hidden-y: 390px;
	--veo-hidden-z: -220px;
	--veo-hidden-scale: 0.62;
	--veo-side-blur: 5px;
	--veo-hidden-blur: 12px;
	--veo-side-opacity: 0.38;
	--veo-hidden-opacity: 0;
	--veo-top-fade-stop: 68%;
	--veo-bottom-fade-stop: 68%;
	--veo-controls-space: 96px;
	--veo-left-safe-space: 36px;
	--veo-arrow-distance: 16px;
	--veo-arrow-right: 0px;
	--veo-arrow-gap: 14px;
	--veo-arrow-size: 48px;
	--veo-arrow-icon-size: 18px;
	--veo-arrow-radius: 999px;
	--veo-arrow-backdrop-blur: 0px;
	--veo-arrow-bg: rgba(255, 255, 255, 0.92);
	--veo-arrow-color: rgba(0, 0, 0, 0.72);
	--veo-arrow-bg-hover: rgba(255, 255, 255, 1);
	--veo-arrow-color-hover: #000000;
	--veo-arrow-border: rgba(0, 0, 0, 0.14);
	--veo-arrow-padding-inline: 8px;
	position: relative;
	width: 100%;
	max-width: 560px;
	height: var(--veo-height);
	margin: 0 auto;
	perspective: 1600px;
	color: var(--veo-arrow-color);
	background: transparent;
}

.veo-orbit,
.veo-orbit * {
	box-sizing: border-box;
}

.veo-orbit__stage {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	isolation: isolate;
	outline: none;
	background: transparent;
}

.veo-orbit__stage::before,
.veo-orbit__stage::after,
.veo-orbit__card::before,
.veo-orbit__card::after {
	content: none;
}

.veo-orbit__track {
	position: relative;
	width: calc(100% - max(var(--veo-controls-space), calc(var(--veo-arrow-distance) + var(--veo-arrow-size) + var(--veo-arrow-padding-inline) + 8px)) - var(--veo-left-safe-space));
	height: 100%;
	margin-left: var(--veo-left-safe-space);
	margin-right: auto;
	transform-style: preserve-3d;
	background: transparent;
}

.veo-orbit[data-veo-orientation="horizontal"] .veo-orbit__track {
	width: 100%;
	height: calc(100% - (var(--veo-arrow-distance) + var(--veo-arrow-size)));
	margin-left: 0;
	margin-right: 0;
}

.veo-orbit__card {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--veo-card-width);
	height: var(--veo-card-height);
	border-radius: var(--veo-radius);
	-webkit-clip-path: inset(0 round var(--veo-radius));
	clip-path: inset(0 round var(--veo-radius));
	overflow: hidden;
	background: transparent;
	transform-origin: center center;
	transition:
		transform var(--veo-transition) var(--veo-ease),
		opacity var(--veo-transition) var(--veo-ease),
		filter var(--veo-transition) var(--veo-ease),
		box-shadow var(--veo-transition) var(--veo-ease),
		z-index 0s linear calc(var(--veo-transition) * 0.3);
	will-change: transform, opacity, filter;
}

.veo-orbit__card,
.veo-orbit__card a {
	cursor: grab;
}

.veo-orbit__card:active,
.veo-orbit__card a:active {
	cursor: grabbing;
}

.veo-orbit__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: inherit;
	background: transparent;
	contain: paint;
	isolation: isolate;
	-webkit-clip-path: inset(0 round var(--veo-radius));
	clip-path: inset(0 round var(--veo-radius));
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-image: none;
	mask-image: none;
}

.veo-orbit__link {
	display: block;
	width: 100%;
	height: 100%;
}

.veo-orbit__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
	backface-visibility: hidden;
	transform: none;
}

.veo-orbit__card[data-veo-slot="center"] {
	z-index: 3;
	opacity: 1;
	filter: blur(0px) saturate(1.05);
	transform: translate(-50%, -50%) translate3d(var(--veo-side-x), 0, var(--veo-center-z)) scale(var(--veo-center-scale));
}

.veo-orbit[data-veo-orientation="horizontal"] .veo-orbit__card[data-veo-slot="center"] {
	transform: translate(-50%, -50%) translate3d(0, var(--veo-side-x), var(--veo-center-z)) scale(var(--veo-center-scale));
}

.veo-orbit__card[data-veo-slot="top"] {
	z-index: 2;
	opacity: var(--veo-side-opacity);
	filter: blur(var(--veo-side-blur)) saturate(0.84);
	transform: translate(-50%, -50%) translate3d(var(--veo-side-x), calc(var(--veo-side-y) * -1), var(--veo-side-z)) scale(var(--veo-side-scale));
}

.veo-orbit[data-veo-orientation="horizontal"] .veo-orbit__card[data-veo-slot="top"] {
	transform: translate(-50%, -50%) translate3d(calc(var(--veo-side-y) * -1), var(--veo-side-x), var(--veo-side-z)) scale(var(--veo-side-scale));
}

.veo-orbit[data-veo-orientation="vertical"] .veo-orbit__card[data-veo-slot="top"] .veo-orbit__media,
.veo-orbit:not([data-veo-orientation]) .veo-orbit__card[data-veo-slot="top"] .veo-orbit__media {
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.14) 18%, rgba(0, 0, 0, 0.56) 42%, rgba(0, 0, 0, 1) var(--veo-top-fade-stop));
	mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.14) 18%, rgba(0, 0, 0, 0.56) 42%, rgba(0, 0, 0, 1) var(--veo-top-fade-stop));
}

.veo-orbit[data-veo-orientation="horizontal"] .veo-orbit__card[data-veo-slot="top"] .veo-orbit__media {
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.14) 18%, rgba(0, 0, 0, 0.56) 42%, rgba(0, 0, 0, 1) var(--veo-top-fade-stop));
	mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.14) 18%, rgba(0, 0, 0, 0.56) 42%, rgba(0, 0, 0, 1) var(--veo-top-fade-stop));
}

.veo-orbit__card[data-veo-slot="bottom"] {
	z-index: 2;
	opacity: var(--veo-side-opacity);
	filter: blur(var(--veo-side-blur)) saturate(0.84);
	transform: translate(-50%, -50%) translate3d(var(--veo-side-x), var(--veo-side-y), var(--veo-side-z)) scale(var(--veo-side-scale));
}

.veo-orbit[data-veo-orientation="horizontal"] .veo-orbit__card[data-veo-slot="bottom"] {
	transform: translate(-50%, -50%) translate3d(var(--veo-side-y), var(--veo-side-x), var(--veo-side-z)) scale(var(--veo-side-scale));
}

.veo-orbit[data-veo-orientation="vertical"] .veo-orbit__card[data-veo-slot="bottom"] .veo-orbit__media,
.veo-orbit:not([data-veo-orientation]) .veo-orbit__card[data-veo-slot="bottom"] .veo-orbit__media {
	-webkit-mask-image: linear-gradient(0deg, transparent 0%, rgba(0, 0, 0, 0.14) 18%, rgba(0, 0, 0, 0.56) 42%, rgba(0, 0, 0, 1) var(--veo-bottom-fade-stop));
	mask-image: linear-gradient(0deg, transparent 0%, rgba(0, 0, 0, 0.14) 18%, rgba(0, 0, 0, 0.56) 42%, rgba(0, 0, 0, 1) var(--veo-bottom-fade-stop));
}

.veo-orbit[data-veo-orientation="horizontal"] .veo-orbit__card[data-veo-slot="bottom"] .veo-orbit__media {
	-webkit-mask-image: linear-gradient(270deg, transparent 0%, rgba(0, 0, 0, 0.14) 18%, rgba(0, 0, 0, 0.56) 42%, rgba(0, 0, 0, 1) var(--veo-bottom-fade-stop));
	mask-image: linear-gradient(270deg, transparent 0%, rgba(0, 0, 0, 0.14) 18%, rgba(0, 0, 0, 0.56) 42%, rgba(0, 0, 0, 1) var(--veo-bottom-fade-stop));
}

.veo-orbit__card[data-veo-slot="hidden-above"] {
	z-index: 0;
	opacity: var(--veo-hidden-opacity);
	filter: blur(var(--veo-hidden-blur));
	transform: translate(-50%, -50%) translate3d(var(--veo-hidden-x), calc(var(--veo-hidden-y) * -1), var(--veo-hidden-z)) scale(var(--veo-hidden-scale));
	pointer-events: none;
}

.veo-orbit[data-veo-orientation="horizontal"] .veo-orbit__card[data-veo-slot="hidden-above"] {
	transform: translate(-50%, -50%) translate3d(calc(var(--veo-hidden-y) * -1), var(--veo-hidden-x), var(--veo-hidden-z)) scale(var(--veo-hidden-scale));
}

.veo-orbit__card[data-veo-slot="hidden-below"] {
	z-index: 0;
	opacity: var(--veo-hidden-opacity);
	filter: blur(var(--veo-hidden-blur));
	transform: translate(-50%, -50%) translate3d(var(--veo-hidden-x), var(--veo-hidden-y), var(--veo-hidden-z)) scale(var(--veo-hidden-scale));
	pointer-events: none;
}

.veo-orbit[data-veo-orientation="horizontal"] .veo-orbit__card[data-veo-slot="hidden-below"] {
	transform: translate(-50%, -50%) translate3d(var(--veo-hidden-y), var(--veo-hidden-x), var(--veo-hidden-z)) scale(var(--veo-hidden-scale));
}

.veo-orbit__controls {
	position: absolute;
	top: 50%;
	right: var(--veo-arrow-right);
	width: max(var(--veo-controls-space), calc(var(--veo-arrow-distance) + var(--veo-arrow-size) + var(--veo-arrow-padding-inline) + 8px));
	padding-left: var(--veo-arrow-distance);
	padding-right: var(--veo-arrow-padding-inline);
	transform: translateY(-50%);
	z-index: 6;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: var(--veo-arrow-gap);
}

.veo-orbit[data-veo-orientation="horizontal"] .veo-orbit__controls {
	top: auto;
	right: auto;
	bottom: 0;
	left: 50%;
	width: max(var(--veo-controls-space), calc((var(--veo-arrow-size) * 2) + var(--veo-arrow-gap) + 8px));
	height: calc(var(--veo-arrow-distance) + var(--veo-arrow-size));
	padding-top: var(--veo-arrow-distance);
	padding-left: 0;
	padding-right: 0;
	transform: translateX(-50%);
	flex-direction: row;
	align-items: flex-start;
	justify-content: center;
}

.veo-orbit__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--veo-arrow-size);
	height: var(--veo-arrow-size);
	padding: 0;
	border: 1px solid var(--veo-arrow-border);
	border-radius: var(--veo-arrow-radius);
	background: var(--veo-arrow-bg);
	color: var(--veo-arrow-color);
	backdrop-filter: blur(var(--veo-arrow-backdrop-blur));
	-webkit-backdrop-filter: blur(var(--veo-arrow-backdrop-blur));
	cursor: pointer;
	font-size: var(--veo-arrow-icon-size);
	line-height: 0;
	transition: transform 220ms ease, background 220ms ease, color 220ms ease, opacity 220ms ease;
	box-shadow: none;
}

.veo-orbit__button:hover:not(:disabled),
.veo-orbit__button:focus-visible:not(:disabled) {
	transform: scale(1.07);
	background: var(--veo-arrow-bg-hover);
	color: var(--veo-arrow-color-hover);
	outline: none;
}

.veo-orbit__button:active:not(:disabled) {
	transform: scale(0.97);
}

.veo-orbit__button:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.veo-orbit__button > span,
.veo-orbit__button > i,
.veo-orbit__button > svg,
.veo-orbit__button i,
.veo-orbit__button svg {
	display: block;
	flex: 0 0 auto;
	margin: auto;
	pointer-events: none;
	font-size: inherit;
	width: 1em;
	height: 1em;
	line-height: 1;
}

.veo-orbit__button svg {
	fill: currentColor;
}


.veo-orbit--full-image .veo-orbit__image {
	object-fit: contain !important;
}
