.draggable-scroll-container {
  &.padded-sides {
    padding: 0 18px;
  }

  .swiper-slide {
    width: auto;
  }
}

.container-sides-shadow,
.marquee-active {
  position: relative;

  &::before,
  &::after {
    content: '';
    position: absolute;
    top: 0;
    width: var(--container-sides-shadow-width, 50px);
    height: 100%;
    z-index: 10;
  }

  &::before {
    left: var(--marquee-before-shadow-padding, 0);
    background: linear-gradient(to right, rgb(41 37 45), rgba(255, 255, 255, 0));
  }

  &::after {
    right: var(--marquee-after-shadow-padding, 0);
    background: linear-gradient(to left, rgb(41 37 45), rgba(255, 255, 255, 0));
  }
}
