.slider-scope * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
  .slider-scope .logos{
    width: 100%;
    display: flex;
    margin:auto;
    overflow: hidden;
    background: transparent;
    white-space: nowrap;
    position: relative;
    margin-top: calc(50vh - 50px);
   
  }

.slider-scope .logos-slide {
  display: flex;
  animation: slide 10s linear infinite;
}

.slider-scope .logos-slide img {
  height: 50px;
  margin: 0 70px;
}
 .slider-scope .logos::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background: linear-gradient(to left, rgba(255, 255, 255, 0) , rgba(255, 255, 255, 0) );
    content: " ";
    z-index: 1;
  }

  .slider-scope .logos::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 200%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) , rgba(255, 255, 255, 0) );
    content: " ";
    z-index: 1;
  }

  @keyframes slide {
   from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-100%);
    }
  }