.jdw-brand-logo-carousel {
	--jdw-blc-columns: 5;
	--jdw-blc-column-gap: 64px;
	--jdw-blc-row-gap: 64px;
	--jdw-blc-logo-width: 120px;
	--jdw-blc-logo-height: 50px;
	--jdw-blc-mobile-gap: 56px;
	--jdw-blc-mobile-height: 44px;
	--jdw-blc-mobile-logo-max-width: 130px;
	--jdw-blc-mobile-duration: 22s;

	width: 100%;
}

.jdw-brand-logo-carousel *,
.jdw-brand-logo-carousel *::before,
.jdw-brand-logo-carousel *::after {
	box-sizing: border-box;
}

.jdw-blc-grid-wrap {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-left: auto;
	margin-right: auto;
	max-width: 1280px;
	width: 100%;
}

.jdw-blc-grid {
	align-items: center;
	display: grid;
	gap: var(--jdw-blc-row-gap) var(--jdw-blc-column-gap);
	grid-template-columns: repeat(var(--jdw-blc-columns), minmax(0, 1fr));
	justify-items: center;
	width: 100%;
}

.jdw-blc-grid[hidden] {
	display: none;
}

.jdw-blc-slot {
	align-items: center;
	display: inline-flex;
	height: var(--jdw-blc-logo-height);
	justify-content: center;
	overflow: hidden;
	position: relative;
	width: var(--jdw-blc-logo-width);
}

.jdw-blc-logo {
	display: block;
	height: 100%;
	object-fit: contain;
	width: 100%;
}

.jdw-blc-slot .jdw-blc-logo:not(:first-child) {
	inset: 0;
	position: absolute;
}

.jdw-blc-mobile {
	display: none;
}

@media (max-width: 767px) {
	.jdw-blc-grid {
		display: none !important;
	}

	.jdw-blc-mobile {
		display: flex;
		height: var(--jdw-blc-mobile-height);
		-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%);
		mask-image: linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%);
		overflow: hidden;
		position: relative;
		width: 100%;
	}

	.jdw-blc-mobile-track {
		align-items: center;
		animation: jdwBlcScroll var(--jdw-blc-mobile-duration) linear infinite;
		display: flex;
		flex-shrink: 0;
		gap: var(--jdw-blc-mobile-gap);
		white-space: nowrap;
		will-change: transform;
	}

	.jdw-brand-logo-carousel[data-mobile-autoplay="no"] .jdw-blc-mobile-track {
		animation: none;
	}

	.jdw-brand-logo-carousel[data-pause-on-hover="yes"] .jdw-blc-mobile-track:hover {
		animation-play-state: paused;
	}

	.jdw-blc-mobile-item {
		align-items: center;
		display: flex;
		flex-shrink: 0;
		height: var(--jdw-blc-mobile-height);
		justify-content: center;
	}

	.jdw-blc-mobile-item img {
		display: block;
		height: 100%;
		max-width: var(--jdw-blc-mobile-logo-max-width);
		object-fit: contain;
		opacity: 1;
		transition: filter 300ms ease, opacity 300ms ease;
		width: auto;
	}

	.jdw-brand-logo-carousel.is-mobile-grayscale .jdw-blc-mobile-item img {
		filter: grayscale(100%);
	}

	.jdw-brand-logo-carousel.is-mobile-grayscale .jdw-blc-mobile-item img:hover {
		filter: grayscale(0%);
	}
}

@keyframes jdwBlcScroll {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.jdw-blc-mobile-track {
		animation: none;
	}

	.jdw-blc-mobile-item img {
		transition: none;
	}
}
