#slider-container {
  padding: 0;
  overflow: hidden;
  margin-left: -700px;
}

@media (max-width: 999px) {
  @keyframes scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-4000px);
    }
  }
  .slider {
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 100vw;
    z-index: 0;
  }
  .slider::before, .slider::after {
    #background: linear-gradient(to right, rgb(28, 32, 35) 0%, rgba(255, 255, 255, 0) 100%);
    content: "";
    height: 300px;
    position: absolute;
    width: 50px;
    z-index: 2;
  }
  .slider::after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
  }
  .slider::before {
    left: 0;
    top: 0;
  }
  .slider .slide-track {
    animation: scroll 110s linear infinite;
    display: flex;
    width: 6400px;
  }
  .slider .slide {
    height: 170px;
    width: 300px;
    border-radius: 15px;
    margin: 0 10px;
    margin-top: 10px;
    box-shadow: 0px 0px 10px rgba(33, 37, 41, 0.25);
  }
}
@media (min-width: 1000px) {
  @keyframes scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-4000px);
    }
  }
  .slider {
    margin: auto;
    overflow: hidden;
    position: relative;
    width: calc(100vw - 17px);
  }
  .slider::before, .slider::after {
    background: linear-gradient(to right, rgb(252, 252, 252) 0%, rgba(255, 255, 255, 0) 100%);
    content: "";
    height: 300px;
    position: absolute;
    width: 75px;
    z-index: 2;
  }
  .slider::after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
  }
  .slider::before {
    left: 0;
    top: 0;
  }
  .slider .slide-track {
    animation: scroll 110s linear infinite;
    display: flex;
    width: 8000px;
  }
  .slider .slide {
    width: 380px;
    height: 200px;
    border-radius: 15px;
    margin: 0 10px;
    margin-top: 10px;
    box-shadow: 0px 0px 10px rgba(33, 37, 41, 0.25);
  }
}