.logo-case-wrapper {
  width: 1360px;
  margin: 0 auto;
  padding-bottom: 50px;
  overflow: hidden;
  --wall-item-height: 100px;
  --wall-item-width: 210px;
  --wall-item-number: 7;
  --duration: 50s;
}

@keyframes scrolling {
  to {
    transform: translateX(calc(var(--wall-item-width) * -1));
  }
}

.wall {
  height: var(--wall-item-height);
  width: 100%;
  position: relative;
  mask-image: linear-gradient(90deg, transparent, black 20%, black 80%, transparent);
}

.wall .wall-item {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(calc(var(--wall-item-width) * var(--wall-item-number)));
  height: var(--wall-item-height);
  width: var(--wall-item-width);
  animation: scrolling var(--duration) linear infinite;
  object-fit: fill;
  padding: 20px;
}

.wall[data-direction='reverse'] .wall-item {
  animation-direction: reverse;
}

.wall .wall-item:nth-child(1) {
  animation-delay: calc( (var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 1) * -1);
}

.wall .wall-item:nth-child(2) {
  animation-delay: calc( (var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 2) * -1);
}

.wall .wall-item:nth-child(3) {
  animation-delay: calc( (var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 3) * -1);
}

.wall .wall-item:nth-child(4) {
  animation-delay: calc( (var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 4) * -1);
}

.wall .wall-item:nth-child(5) {
  animation-delay: calc( (var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 5) * -1);
}

.wall .wall-item:nth-child(6) {
  animation-delay: calc( (var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 6) * -1);
}

.wall .wall-item:nth-child(7) {
  animation-delay: calc( (var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 7) * -1);
}

.wall .wall-item:nth-child(8) {
  animation-delay: calc( (var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 8) * -1);
}

.wall .wall-item:nth-child(9) {
  animation-delay: calc( (var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 9) * -1);
}

.wall .wall-item:nth-child(10) {
  animation-delay: calc( (var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 10) * -1);
}

.wall .wall-item:nth-child(11) {
  animation-delay: calc( (var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 11) * -1);
}

.wall .wall-item:nth-child(12) {
  animation-delay: calc( (var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 12) * -1);
}

.wall .wall-item:nth-child(13) {
  animation-delay: calc( (var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 13) * -1);
}

.wall .wall-item:nth-child(14) {
  animation-delay: calc( (var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 14) * -1);
}

.wall .wall-item:nth-child(15) {
  animation-delay: calc( (var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 15) * -1);
}

.wall .wall-item:nth-child(16) {
  animation-delay: calc( (var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 16) * -1);
}

.wall:has(.wall-item:hover) .wall-item {
  animation-play-state: paused;
}