.bg-body-fade-to-right {
  --fm-gradient: linear-gradient(to right, var(--fm-body-bg) 0%, rgba(var(--fm-body-bg-rgb), 0.8) 40%, rgba(var(--fm-body-bg-rgb), 0) 75%, rgba(var(--fm-body-bg-rgb), 0) 100%);
}

.bg-body-fade-to-left {
  --fm-gradient: linear-gradient(to left, var(--fm-body-bg) 0%, var(--fm-body-bg) 40%, rgba(var(--fm-body-bg-rgb), 0.8) 75%, rgba(var(--fm-body-bg-rgb), 0) 100%);
}

.brand-carousel > .brand-carousel__group {
  flex: 0 0 100%;
}

.brand-carousel .brand-carousel__group {
  will-change: transform;
  animation: scrolling 30s linear infinite;
}

.brand-carousel:hover .brand-carousel__group {
  animation-play-state: paused;
}

.brand-carousel .brand-carousel__group .brand {
  width: 210px;
  height: 120px;
  transition: opacity ease 0.2s;
}

@media screen and (max-width: calc(992px - 1px)) {
  .brand-carousel .brand-carousel__group .brand {
    width: 130px;
    height: 48px;
  }
}

.brand-carousel .brand-carousel__group .brand:not(:hover) {
  opacity: 0.5;
}

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