Logo Carousel

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/mixins/breakpoints";

.logo-carousel {
    padding-top: 3rem;
    padding-bottom: 3rem;
    display: flex;
    overflow: hidden;

    @include media-breakpoint-down(sm) {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    img {
        width: auto;
		height: 3.875rem;
		max-width: 8.5rem;
        margin: 0 4rem;
        object-fit: contain;
        display: block;

        @include media-breakpoint-down(md) {
            margin: 0 2.5rem;
            height: 3rem;
            max-width: 7rem;
        }
    }
}

.logos-title {
	margin-top: 3rem;
	margin-bottom: 1rem;

	@include media-breakpoint-down(sm) {
		margin-bottom: 0;
	}
}

jQuery(function($){
    
    $('.js-logo-carousel').slick({
        speed: 15000,
        autoplay: true,
        autoplaySpeed: 0,
        centerMode: true,
        cssEase: 'linear',
        slidesToShow: 1,
        slidesToScroll: 1,
        variableWidth: true,
        infinite: true,
        initialSlide: 1,
        arrows: false,
        buttons: false,
        pauseOnHover: false,
        responsive: [
            {
                breakpoint: 769,
                settings: {
                    speed: 5000,
                }
            }
        ]
    });

});