.auto-brands {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  /*@keyframes scrollLeft {
        to {
            left: -20rem;
        }
    }*/
}
.auto-brands__scroller {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  margin-top: 2rem;
  row-gap: 3rem;
  column-gap: 1rem;
  height: 100%;
}
.auto-brands__scroller--type {
  display: flex;
  flex: 1 1 10%;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  width: 8rem;
  height: 4rem;
}
.auto-brands__scroller--type img {
  width: 100%;
  max-width: 12rem;
  height: auto;
  max-height: 4rem;
}
/*@media (max-width: 992px) {
    .auto-brands {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        //background: teal;

        &__scroller {
            position: relative;
            width: 100%;
            height: 13rem;
            max-width: 90vw;
            border: 2px solid pink;
            overflow: hidden;
            mask-image: linear-gradient(
                to right,  
                rgba(0,0,0,0),
                rgba(0,0,0,1) 10%,
                rgba(0,0,0,1) 90%,
                rgba(0,0,0,0)
                );
                
            
            &--type {
                position: absolute;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 1.5rem;
                //border: 2px solid blue;
                width: 100%;
                height: 4rem;
                left: max(calc(20rem * 10), 100%);
                animation: scrollLeft 30s linear infinite;
                
                img {
                    width: 100%;
                    max-width: 10rem;
                    height: auto;
                    max-height: 4rem;
                }
                
                &:nth-child(1) { animation-delay: calc(30s / 10 * (10 - 1) * -1); }
                &:nth-child(2) { animation-delay: calc(30s / 10 * (10 - 2) * -1); }
                &:nth-child(3) { animation-delay: calc(30s / 10 * (10 - 3) * -1); }
                &:nth-child(4) { animation-delay: calc(30s / 10 * (10 - 4) * -1); }
                &:nth-child(5) { animation-delay: calc(30s / 10 * (10 - 5) * -1); }
                &:nth-child(6) { animation-delay: calc(30s / 10 * (10 - 6) * -1); }
                &:nth-child(7) { animation-delay: calc(30s / 10 * (10 - 7) * -1); }
                &:nth-child(8) { animation-delay: calc(30s / 10 * (10 - 8) * -1); }
                &:nth-child(9) { animation-delay: calc(30s / 10 * (10 - 9) * -1); }
                &:nth-child(10) { animation-delay: calc(30s / 10 * (10 - 10) * -1); }
                &:nth-child(11) { animation-delay: calc(30s / 10 * (10 - 11) * -1); }
                &:nth-child(12) { animation-delay: calc(30s / 10 * (10 - 12) * -1); }
                &:nth-child(13) { animation-delay: calc(30s / 10 * (10 - 13) * -1); }
            }
        }
    }

    @keyframes scrollLeft {
        to {
            left: -20rem;
        }
    }

}*/