.logo-slider {
	--logo-width: 260px;
	--logo-height: 150px;
	--logo-gap: 30px;
	--logo-visible: 5;

	display: flex;
	align-items: center;
	width: 100%;
	max-width: 1480px;
	margin: 24px auto;
	position: relative;
}

@media (max-width: 1399px) {
	.logo-slider {
		--logo-visible: 4;
	}
}

@media (max-width: 1199px) {
	.logo-slider {
		--logo-visible: 3;
	}
}

.logo-slider__viewport {
	overflow: hidden;
	width: calc((var(--logo-width) * var(--logo-visible)) + (var(--logo-gap) * (var(--logo-visible) - 1)));
	max-width: 100%;
	height: 200px;
	margin: 0 auto;
	padding: 0;
	box-sizing: content-box;
	cursor: grab;
	display: flex;
	align-items: center;
	scroll-padding-left: 2px;

}

.logo-slider__viewport.is-dragging {
	cursor: grabbing;
}

.logo-slider__track {
	display: flex;
	gap: var(--logo-gap);
	transition: transform 300ms ease;
	will-change: transform;
	touch-action: pan-y;
}

.logo-slider__item {
	flex: 0 0 var(--logo-width);
	width: var(--logo-width);
	height: var(--logo-height);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 3px;
	overflow: hidden;
	border: 1px solid rgba(153, 179, 191, 0.25) !important;
}

.logo-slider__item img {
	display: block;
	width: var(--logo-width);
	height: var(--logo-height);
	object-fit: contain;
	user-select: none;
	pointer-events: none;
}

.logo-slider__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background-color: #031721;
	color: #fff;
	cursor: pointer;
	transition:
		background-color 180ms ease,
		color 180ms ease,
		transform 180ms ease,
		opacity 180ms ease;
	will-change: background-color, transform, opacity;

}

.logo-slider__arrow svg {
	display: block;
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
	transition: transform 180ms ease;
	will-change: transform;
}


.logo-slider__arrow[data-logo-prev] svg {
	transform: rotate(-135deg) scale(0.75);
}

.logo-slider__arrow[data-logo-next] svg {
	transform: rotate(45deg) scale(0.75);
}

@media (max-width: 991px) {

	.logo-slider__arrow[data-logo-prev] {
		margin-left: 32px;
	}

	.logo-slider__arrow[data-logo-next] {
		margin-right: 32px;
	}
	.logo-slider__arrow svg {
		width: 12px;
		height: 12px;
	}
}

@media (min-width: 992px) {

	.logo-slider__arrow[data-logo-prev] {
		margin-left: -16px;
	}

	.logo-slider__arrow[data-logo-next] {
		margin-right: -16px;
	}
}

@media (max-width: 1199px) {
	.logo-slider {
		--logo-visible: 3;
	}
}

@media (max-width: 991px) {
	.logo-slider {
		--logo-visible: 2;
	}
}

@media (max-width: 767px) {
	.logo-slider {
		--logo-visible: 1;
		--logo-gap: 20px;
		--logo-width: min(260px, calc(100vw - 100px));
		--logo-height: calc(var(--logo-width) * 150 / 260);
	}

	.logo-slider__arrow {
		width: 32px;
		height: 32px;
		font-size: 24px;
	}
}