.marquee {
  margin: auto;
  width: 80%;
  display: flex;
  block-size: var(--marquee-item-height);
  overflow-x: hidden;
  mask-image: linear-gradient(
    to right,
    hsl(0 0% 0% / 0),
    hsl(0 0% 0% / 1) 20%,
    hsl(0 0% 0% / 1) 80%,
    hsl(0 0% 0% / 0)
  );
}

.marquee-brands {
  --marquee-item-width: 180px;
  --marquee-item-height: 150px;
  --marquee-duration: 24s;
  --marquee-items: 12;
}

.marquee-partners {
  --marquee-item-width: 180px;
  --marquee-item-height: 150px;
  --marquee-duration: 24s;
  --marquee-items: 11;
}

.marquee-ecom {
  --marquee-item-width: 180px;
  --marquee-item-height: 150px;
  --marquee-duration: 24s;
  --marquee-items: 8;
}

.marquee__item {
  --marquee-item-offset: max(
    calc(var(--marquee-item-width) * var(--marquee-items)),
    calc(100% + var(--marquee-item-width))
  );
  --marquee-delay: calc(var(--marquee-duration) / var(--marquee-items) * (var(--marquee-items) - var(--marquee-item-index)) * -1);
  position: absolute;
  inset-inline-start: var(--marquee-item-offset);
  transform: translateX(-50%);
  animation: go linear var(--marquee-duration) var(--marquee-delay, 0s) infinite;
}
.marquee-brands .marquee__item:nth-of-type(1) {
  --marquee-item-index: 1;
}

.marquee-brands .marquee__item:nth-of-type(2) {
  --marquee-item-index: 2;
}

.marquee-brands .marquee__item:nth-of-type(3) {
  --marquee-item-index: 3;
}
.marquee-brands .marquee__item:nth-of-type(4) {
  --marquee-item-index: 4;
}
.marquee-brands .marquee__item:nth-of-type(5) {
  --marquee-item-index: 5;
}
.marquee-brands .marquee__item:nth-of-type(6) {
  --marquee-item-index: 6;
}
.marquee-brands .marquee__item:nth-of-type(7) {
  --marquee-item-index: 7;
}
.marquee-brands .marquee__item:nth-of-type(8) {
  --marquee-item-index: 8;
}
.marquee-brands .marquee__item:nth-of-type(9) {
  --marquee-item-index: 9;
}
.marquee-brands .marquee__item:nth-of-type(10) {
  --marquee-item-index: 10;
}
.marquee-brands .marquee__item:nth-of-type(11) {
  --marquee-item-index: 11;
}
.marquee-brands .marquee__item:nth-of-type(12) {
  --marquee-item-index: 12;
}
.marquee-partners .marquee__item:nth-of-type(1) {
  --marquee-item-index: 1;
}
.marquee-partners .marquee__item:nth-of-type(2) {
  --marquee-item-index: 2;
}
.marquee-partners .marquee__item:nth-of-type(3) {
  --marquee-item-index: 3;
}
.marquee-partners .marquee__item:nth-of-type(4) {
  --marquee-item-index: 4;
}
.marquee-partners .marquee__item:nth-of-type(5) {
  --marquee-item-index: 5;
}
.marquee-partners .marquee__item:nth-of-type(6) {
  --marquee-item-index: 6;
}
.marquee-partners .marquee__item:nth-of-type(7) {
  --marquee-item-index: 7;
}
.marquee-partners .marquee__item:nth-of-type(8) {
  --marquee-item-index: 8;
}
.marquee-partners .marquee__item:nth-of-type(9) {
  --marquee-item-index: 9;
}
.marquee-partners .marquee__item:nth-of-type(10) {
  --marquee-item-index: 10;
}
.marquee-partners .marquee__item:nth-of-type(11) {
  --marquee-item-index: 11;
}
.marquee-ecom .marquee__item:nth-of-type(1) {
  --marquee-item-index: 1;
}
.marquee-ecom .marquee__item:nth-of-type(2) {
  --marquee-item-index: 2;
}
.marquee-ecom .marquee__item:nth-of-type(3) {
  --marquee-item-index: 3;
}
.marquee-ecom .marquee__item:nth-of-type(4) {
  --marquee-item-index: 4;
}
.marquee-ecom .marquee__item:nth-of-type(5) {
  --marquee-item-index: 5;
}
.marquee-ecom .marquee__item:nth-of-type(6) {
  --marquee-item-index: 6;
}
.marquee-ecom .marquee__item:nth-of-type(7) {
  --marquee-item-index: 7;
}
.marquee-ecom .marquee__item:nth-of-type(8) {
  --marquee-item-index: 8;
}

@keyframes go {
  to {  
    inset-inline-start: calc(var(--marquee-item-width) * -1);
  }
}