:root {
  --width-item: 20rem;
  --height-item: 7rem;
}

.carrousel-linear {
  align-items: center;
  background: #fafafa;
  display: flex;
  height: 13rem;
  justify-content: center;
}

.slider {
  height: var(--height-item);
  margin: auto;
  overflow: hidden;
  position: relative;
  width: calc(var(--width-item) * 7);
}
.slider::before, .slider::after {
  background-image: linear-gradient(to right, rgb(250, 250, 250) 0%, rgba(250, 250, 250, 0) 100%);
  content: "";
  height: var(--height-item);
  position: absolute;
  width: var(--width-item);
  z-index: 2;
}
.slider::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}
.slider::before {
  left: 0;
  top: 0;
}
.slider .slide-track, .slider .slide-track-reverse {
  animation: scroll 10s linear infinite;
  display: flex;
  width: calc(var(--width-item) * 14);
}
.slider .slide-track-reverse {
  animation: scroll-reverse 25s linear infinite;
}
.slider .slide {
  height: var(--height-item);
  width: var(--width-item);
}
.slider .slide > img {
  height: var(--height-item);
  width: var(--height-item);
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(var(--width-item) * -1 * 7));
  }
}
@keyframes scroll-reverse {
  0% {
    transform: translateX(calc(var(--width-item) * -1 * 7));
  }
  100% {
    transform: translateX(0);
  }
}

/*# sourceMappingURL=carrousel.css.map */