.section--icon-slider{
    overflow: hidden;
}
.icon-slider__heading{
    text-align: left;
    margin-bottom: 4rem;
}
.icon-slider{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.icon-slider .slider__counter{
    color: var(--blue);
}
.container--icon-slider {
    height: 7rem;
    width: 20rem;
    position: relative;
    margin: 0 calc(var(--std-padding) * -1) 0;
    filter: grayscale(1);
}

.icon-slider__track {
    display: flex;
    position: absolute;
    left: calc(calc(var(--icon-count) / 3) * -20rem);
    height: 7rem;
    width: calc(var(--icon-count) * 20rem);
}
.icon-slider__icon {
    height: 7rem;
    width: 10rem;
    object-fit: contain;
    object-position: 50%;
    margin: 0 5rem;
}
.icon-slider__nav {
    padding-top: 2rem;
    display: flex;
    width: 100%;
    justify-content: center;
}
.icon-slider__button {
    border: 0;
    padding: 0;
    min-width: 0;
    width: auto;
    margin: 0 1rem;
}

.variation-1 .icon-slider__track {
    --transform-offset: calc(-33.33%/var(--total-slides));
    transform: translate3d(calc(var(--transform-offset)*calc(var(--active-slide) - 1)), 0, 0);
    transition: transform .5s ease;
}

.variation-2 .icon-slider__track {
    animation: slow-slide linear infinite;
    --icon-scroll-speed: calc(var(--icon-count) * 3s);
    animation-duration: var(--icon-scroll-speed);
}
.variation-2 .icon-slider__track:hover{
    animation-play-state: paused;
}



@media(min-width: 960px){

}

@keyframes slow-slide{
    0%{
        transform: translate3d(0%, 0, 0)
    }
    100%{
        transform: translate3d(-33.34%, 0, 0)
    }
}