.slide,.slider{place-items:center}
.slider{margin:auto;height:auto;position:relative;width:90%;display:grid;overflow:hidden}
.slider::after,.slider::before{position:absolute;content:'';height:100%;width:25%;z-index:2;pointer-events:none;top:0;background-image:linear-gradient(to right,#f9f9f9 0,rgba(255,255,255,0) 100%)}
.slider::after{right:0;transform:rotateZ(180deg)}
.slider::before{left:0}
.slider {
  height: 100px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.slide-track {
  display: flex;
  width: calc(250px * 12); /* 6 items x 2 = 12 */
  animation: scroll 50s linear infinite;
}


@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-200px * 25)); /* scroll full original set */
  }
}
.slide {
  width: 250px;
  flex-shrink: 0;
  /* Optional styling */
  text-align: center;
  padding: 20px;
  /*background: #eee;*/
  /*border: 1px solid #ccc;*/
}

/* Scroll keyframes */
/*@keyframes scroll {*/
/*  0% {*/
/*    transform: translateX(0);*/
/*  }*/
/*  100% {*/
/*    transform: translateX(-50%);*/
/*  }*/
/*}*/

.slide-track2{width:calc(150px * 15);animation:15s linear infinite scroll2}
.slide{width:15rem;height:7rem;margin:0 1rem;display:grid;transition:.5s}
.slide img{width:100%;height:2.5rem;object-fit:contain;filter:grayscale(1);opacity:.6;transition:.3s ease-in-out}
.slide img:hover{filter:grayscale(0);opacity:1}
/*@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(calc(-150px * 10))}}*/
@keyframes scroll2{0%{transform:translateX(0)}100%{transform:translateX(calc(-150px * 5))}}
@media screen and (max-width:768px){.slide-track,.slide-track2{width:calc(150px * 20)}.slide-track2{width:calc(150px * 15)}.slide{width:120px}@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(calc(-80px * 10))}}@keyframes scroll2{0%{transform:translateX(0)}100%{transform:translateX(calc(-80px * 5))}}}