<div class="logo-slider">
  <div class="logo-track">
    <div class="logo">
      <img src="https://picsum.photos/200/96" width="auto" height="86" alt="amicale" title="amicale" loading="lazy">
    </div>
    <div class="logo">
      <img src="https://picsum.photos/200/96" width="auto" height="86" alt="duboeuf" title="duboeuf" loading="lazy">
    </div>
    <div class="logo">
      <img src="https://picsum.photos/200/96" width="auto" height="86" alt="grand_noir" title="grand_noir" loading="lazy">
    </div>
    <div class="logo">
      <img src="https://picsum.photos/200/96" width="auto" height="86" alt="masso" title="masso" loading="lazy">
    </div>
    <div class="logo">
      <img src="https://picsum.photos/200/96" width="auto" height="86" alt="nightbloom" title="nightbloom" loading="lazy">
    </div>
    <div class="logo">
      <img src="https://picsum.photos/200/96" width="auto" height="86" alt="penfolds" title="penfolds" loading="lazy">
    </div>
    <div class="logo">
      <img src="https://picsum.photos/200/96" width="auto" height="86" alt="roodeberg" title="roodeberg" loading="lazy">
    </div>
  </div>
</div>

.logo-slider * {
    box-sizing: border-box;
  }
  
  .logo-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
  }
  
  .logo-track {
    display: flex;
    align-items: center;
    gap: 72px;
    width: max-content;
    animation: scroll 25s linear infinite;
  }
  
  .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 220px;
    height: 96px;
  }
  
  .logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
  }
  
  @keyframes scroll {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-50%);
    }
  }
  
  .logo-slider::before,
  .logo-slider::after {
    content: "";

    z-index: 2;
    position: absolute;
    top: 0;
    width: 120px;
    height: 100%;
    
    pointer-events: none;
  }
  
  .logo-slider::before {
    left: 0;
    background: linear-gradient(to right, white, transparent);
  }
  
  .logo-slider::after {
    right: 0;
    background: linear-gradient(to left, white, transparent);
  }