@use '../../utils' as *;

.brand {
    background-color: #E5F9ED;

    &__bottom-space {
        padding-bottom: 360px;

        @media #{$xs} {
            padding-bottom: 320px;
        }
    }
}

.slider-brand{
    background-repeat: repeat;
    overflow: hidden;
    ul{
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      gap: 140px;

      @media #{$sm} {
        gap: 100px;
      }
      @media #{$xs} {
        gap: 50px;
      }

      li {
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;

            @media #{$xs} {
                max-width: 80px;
                width: 50px;
            }
        }
      } 
    }
  }
  
  
  .rr-scroller[data-animated=true] .rr-scroller__inner{
    width: max-content;
    flex-wrap: nowrap;
    animation: scroll var(--_animation-duration,40s) linear infinite;
  }
  
  .rr-scroller[data-speed=slow]{
    --_animation-duration: 60s;
  }
  
  @keyframes scroll{
    to{
      transform:translate(calc(-50% - 0.5rem));
    }
  }