.support {
  display: flex;
  block-size: var(--support-item-height);
  /*margin-block: var(--support-item-height);*/
  position: relative;
  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)
  );
}

.support--8 {
  --support-item-width: 200px;
  --support-item-height: 150px;
  --support-duration: 36s;
  --support-items: 8;  
}

.support--3 {
  --support-item-width: 150px;
  --support-item-height: 150px;
  --support-duration: 24s;
  --support-items: 3;
}

.support--6 {
  --support-item-width: 166px;
  --support-item-height: 100px;
  --support-duration: 32s;
  --support-items: 6;
}

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

.support__item:nth-child(4n) {
  border-top-right-radius: 1rem;
}

.support__item:nth-child(4n + 1) {
  border-bottom-right-radius: 1rem;
}

.support__item:nth-child(4n + 2) {
  border-bottom-left-radius: 1rem;
}

.support__item:nth-child(4n + 3) {
  border-top-left-radius: 1rem;
}

.support--8 .support__item:nth-of-type(1) {
  --support-item-index: 1;
}

.support--8 .support__item:nth-of-type(2) {
  --support-item-index: 2;
}

.support--8 .support__item:nth-of-type(3) {
  --support-item-index: 3;
}

.support--8 .support__item:nth-of-type(4) {
  --support-item-index: 4;
}

.support--8 .support__item:nth-of-type(5) {
  --support-item-index: 5;
}

.support--8 .support__item:nth-of-type(6) {
  --support-item-index: 6;
}

.support--8 .support__item:nth-of-type(7) {
  --support-item-index: 7;
}

.support--8 .support__item:nth-of-type(8) {
  --support-item-index: 8;
}

.support--3 .support__item:nth-of-type(1) {
  --support-item-index: 1;
}

.support--3 .support__item:nth-of-type(2) {
  --support-item-index: 2;
}

.support--3 .support__item:nth-of-type(3) {
  --support-item-index: 3;
}

.support--6 .support__item:nth-of-type(1) {
  --support-item-index: 1;
}

.support--6 .support__item:nth-of-type(2) {
  --support-item-index: 2;
}

.support--6 .support__item:nth-of-type(3) {
  --support-item-index: 3;
}

.support--6 .support__item:nth-of-type(4) {
  --support-item-index: 4;
}

.support--6 .support__item:nth-of-type(5) {
  --support-item-index: 5;
}

.support--6 .support__item:nth-of-type(6) {
  --support-item-index: 6;
}

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