.logo-carousel {
	--logo-carousel-gap: 24px;
    --logo-carousel-row-gap: 20px;
    --logo-carousel-item-width: 360px;
    --logo-carousel-item-height: 100px;
    --logo-carousel-image-height: 74px;
    --logo-carousel-image-max-width: 100%;

	display: flex;
	flex-direction: column;
	gap: var(--logo-carousel-row-gap);
	width: 100%;
	overflow: hidden;
}

.logo-carousel__row {
	width: 100%;
	overflow: hidden;
}

.logo-carousel__track {
	display: flex;
	width: max-content;
	will-change: transform;

	animation-duration: var(--logo-carousel-duration, 50s);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.logo-carousel__group {
	display: flex;
	flex-shrink: 0;
	gap: var(--logo-carousel-gap);
	padding-right: var(--logo-carousel-gap);
}

.logo-carousel__item {
	display: flex;
	flex: 0 0 var(--logo-carousel-item-width);
	align-items: center;
	justify-content: center;

	width: var(--logo-carousel-item-width);
	height: var(--logo-carousel-item-height);
	padding: 22px 42px;

	overflow: hidden;
	box-sizing: border-box;

	border-radius: 999px;
	background-color: #f1f1f1;
}

.logo-carousel .logo-carousel__image {
	display: block;

	width: auto !important;
	height: var(--logo-carousel-image-height) !important;

	max-width: var(--logo-carousel-image-max-width) !important;
	max-height: var(--logo-carousel-image-height) !important;

	margin: 0;
	object-fit: contain;
	object-position: center;
}

/* Top row moves to the right. */
.logo-carousel__row--top .logo-carousel__track {
	animation-name: logo-carousel-move-right;
}

/* Bottom row moves to the left. */
.logo-carousel__row--bottom .logo-carousel__track {
	animation-name: logo-carousel-move-left;
}

.logo-carousel__row:hover .logo-carousel__track,
.logo-carousel__row:focus-within .logo-carousel__track {
	animation-play-state: paused;
}

@keyframes logo-carousel-move-left {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(-25%, 0, 0);
	}
}

@keyframes logo-carousel-move-right {
	from {
		transform: translate3d(-25%, 0, 0);
	}

	to {
		transform: translate3d(0, 0, 0);
	}
}

/* Tablet */
@media (max-width: 1024px) {
	.logo-carousel {
		--logo-carousel-gap: 18px;
        --logo-carousel-row-gap: 16px;
        --logo-carousel-item-width: 320px;
        --logo-carousel-item-height: 90px;
        --logo-carousel-image-height: 67px;
        --logo-carousel-image-max-width: 100%;
	}

	.logo-carousel__item {
		padding: 18px 32px;
	}
}

/* Mobile */
@media (max-width: 767px) {
	.logo-carousel {
		--logo-carousel-gap: 12px;
        --logo-carousel-row-gap: 12px;
        --logo-carousel-item-width: 180px;
        --logo-carousel-item-height: 54px;
        --logo-carousel-image-height: 40px;
        --logo-carousel-image-max-width: 100%;
	}

	.logo-carousel__item {
		padding: 14px 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.logo-carousel__track {
		animation-play-state: paused;
	}
}