.carrusel_container {
  &::before,
  &::after {
    content: "";
    position: absolute;
    top: 0;
    width: 100px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
  }

  &::before {
    left: 0;
    background: linear-gradient(to right, #12182b, rgba(255, 255, 255, 0));
  }

  &::after {
    right: 0;
    background: linear-gradient(to left, #12182b, rgba(255, 255, 255, 0));
  }
}

.feedback_carrusel {
  display: flex;
  width: 100%;

  &:hover .feedback_row {
    animation-play-state: paused;
  }
}

.feedback_row {
  --gutter: 1rem;
  --animation-duration: 20s;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--gutter);
  transition: transform 0.5s ease-in-out;
  /* overflow-x: auto !important; */
  padding-right: var(--gutter);
  margin-bottom: 1rem;

  &[data-animation="orientation-left"] {
    animation: scroll-infinite var(--animation-duration) linear infinite;
  }
  &[data-animation="orientation-right"] {
    animation: scroll-infinite var(--animation-duration) linear infinite reverse;
  }

  &::-webkit-scrollbar {
    display: none;
  }

  & > div {
    min-width: 325px;
    height: 100%;
    text-wrap: pretty;
  }

  & p{
    color: #ddd;
  }
}

@keyframes scroll-infinite {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}