.jc-brand-logos{
	align-items: center;
	--jc-brand-logos-gap: 46px;
	display: flex;
	flex-direction: column;
	gap: 36px;
	margin: 120px auto 0;
	max-width: min(1040px, calc(100vw - (var(--jc-site-gutter, 80px) * 2)));
	position: relative;
	width: 100%;
	z-index: 2;
}

.jc-brand-logos.alignwide,
.jc-brand-logos.alignfull{
	max-width: min(1040px, calc(100vw - (var(--jc-site-gutter, 80px) * 2)));
}

.jc-brand-logos.alignfull{
	padding-left: var(--jc-site-gutter, 80px);
	padding-right: var(--jc-site-gutter, 80px);
}

.jc-brand-logos__title{
	color: var(--font-light-color);
	font-size: 24px;
	font-weight: 500;
	line-height: normal;
	margin: 0;
	text-align: center;
}

.jc-brand-logos__list{
	animation: jc-brand-logos-marquee 28s linear infinite;
	align-items: center;
	display: flex;
	flex-wrap: nowrap;
	gap: var(--jc-brand-logos-gap);
	justify-content: flex-start;
	list-style: none;
	margin: 0;
	padding: 0;
	width: max-content;
	will-change: transform;
}

.jc-brand-logos__viewport{
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
	cursor: grab;
	mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
	overflow: hidden;
	touch-action: pan-y;
	width: 100%;
}

.jc-brand-logos__viewport:focus-visible{
	outline: 1px solid rgba(0, 241, 169, 0.7);
	outline-offset: 8px;
}

.jc-brand-logos.is-interactive .jc-brand-logos__list{
	animation: none;
	transform: translate3d(var(--jc-brand-logos-offset, 0px), 0, 0);
}

.jc-brand-logos.is-dragging .jc-brand-logos__viewport{
	cursor: grabbing;
}

.jc-brand-logos__item.jc-brand-logos__item--duplicate{
	display: flex;
}

.jc-brand-logos__item{
	align-items: center;
	display: flex;
	justify-content: center;
	margin: 0;
	height: 62px;
	min-height: 62px;
	overflow: visible;
	padding: 8px 12px;
	width: 190px;
}

.jc-brand-logos__logo{
	display: block;
	filter: none;
	height: 42px;
	max-height: none;
	max-width: none;
	object-fit: contain;
	pointer-events: none;
	user-select: none;
	width: 166px;
}

.jc-brand-logos__svg{
	color: var(--font-light-color);
	filter: none;
	height: 42px;
	max-height: none;
	max-width: none;
	pointer-events: none;
	user-select: none;
	width: 166px;
}

.jc-brand-logos__svg path,
.jc-brand-logos__svg polygon,
.jc-brand-logos__svg circle,
.jc-brand-logos__svg ellipse{
	fill: currentColor !important;
}

.jc-brand-logos__svg line,
.jc-brand-logos__svg polyline{
	stroke: currentColor !important;
}

.jc-brand-logos:hover .jc-brand-logos__list{
	animation-play-state: paused;
}

@media (max-width: 720px){
	.jc-brand-logos{
		--jc-brand-logos-gap: 36px;
		gap: 20px;
		margin-top: 64px;
		max-width: 335px;
	}

	.jc-brand-logos.alignwide,
	.jc-brand-logos.alignfull{
		max-width: 335px;
	}

	.jc-brand-logos.alignfull{
		padding-left: var(--jc-site-gutter, 20px);
		padding-right: var(--jc-site-gutter, 20px);
	}

	.jc-brand-logos__title{
		font-size: 16px;
		width: 100%;
	}

	.jc-brand-logos__list{
		animation-duration: 18s;
	}

	.jc-brand-logos__viewport{
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		overflow: hidden;
		width: 100vw;
	}

	.jc-brand-logos__item{
		flex: 0 0 auto;
		height: 58px;
		min-height: 58px;
		width: 176px;
	}

	.jc-brand-logos__logo{
		height: 40px;
		width: 152px;
	}

	.jc-brand-logos__svg{
		height: 40px;
		width: 152px;
	}
}

@keyframes jc-brand-logos-marquee{
	from{
		transform: translateX(0);
	}

	to{
		transform: translateX(calc(-50% - (var(--jc-brand-logos-gap) / 2)));
	}
}