.ts-logos-carousel{
    display: flex;
    gap: 64px;
    flex-wrap: nowrap;
    width: fit-content;
	white-space: nowrap;
	padding: 0;
	margin: 0;
	overflow: hidden;
	animation-name: scrollHanimate;
	animation-duration: var(--car-speed);
	animation-iteration-count: infinite;
    animation-direction: alternate;
	animation-timing-function: ease-in-out;
}
.ts-logos-carousel.ts-logos-carousel-reverse {
  animation-name: scrollHanimateReverse;
}
.ts-logos-carousel li{
    display: inline-flex;
    width: fit-content;
	list-style: none;
}
.ts-logos-carousel li img{
    width: auto;
	max-width: none;
    height: 48px;
}

@media only screen and (max-width: 1366px) {
	.ts-logos-carousel{
		animation-duration: var(--car-speed-laptop);
	}
}
@media only screen and (max-width: 1024px) {
    .ts-logos-carousel{
        gap: 40px;
		animation-duration: var(--car-speed-tablet);
    }
    .ts-logos-carousel li img{
        height: 32px;
    }
}
@media only screen and (max-width: 480px) {
    .ts-logos-carousel{
        animation-duration: var(--car-speed-mobile);
    }
}

@keyframes scrollHanimate {
	from {
		transform: translateX(0%);
	}
	to {
		transform: translateX(calc(-100% + 100vw))
	}
}
@keyframes scrollHanimateReverse {
  from {
    transform: translateX(calc(-100% + 100vw));
  }
  to {
    transform: translateX(0%);
  }
}