:root {
  --total-brand: 14;
  --logo-width: 18rem;
  --total-logo-width: calc(var(--total-brand) * var(--logo-width));
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  background-color: whitesmoke;

  display: grid;
  place-items: center;
}

.slider {
  position: relative;
  width: 100vw;
  height: 12rem;
  background-color: #fff;

  box-shadow: 0.8rem 1.4rem -0.2rem #0001;

  display: flex;
  align-items: center;

  overflow: hidden;
}
.slider::before,
.slider::after {
  position: absolute;
  content: "";

  height: 100%;
  width: var(--logo-width);
}

.slider::before {
  left: 0;
  background: linear-gradient(to right, #fff 0%, #fff0 100%);
}
.slider::after {
  right: 0;
  background: linear-gradient(to left, #fff 0%, #fff0 100%);
}

.slider ul.brands {
  list-style: none;

  width: var(--total-logo-width);

  display: flex;

  animation: slideleft 22s linear infinite;
}

@keyframes slideleft {
  100% {
    transform: translateX(calc(-100% / 2));
  }
}

ul.brands li.brand-logo {
  width: var(--logo-width);
  font-size: 2rem;
  text-align: center;
  margin-left: 3rem;
}