Почему у меня в slick slider не работает responsive?

$('.cards-slider').slick({
            infinite: false,
            slidesToShow: 3,
            slidesToScroll: 1,
            prevArrow: `
                <svg class="control control-prew" width="18" height="24" viewBox="0 0 18 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M14.3337 3.31066C14.9195 2.72487 14.9195 1.77513 14.3337 1.18934C13.748 0.603553 12.7982 0.603553 12.2124 1.18934L2.61242 10.7893L1.55176 11.85L2.61242 12.9107L12.2124 22.5107C12.7982 23.0964 13.748 23.0964 14.3337 22.5107C14.9195 21.9249 14.9195 20.9751 14.3337 20.3893L5.7944 11.85L14.3337 3.31066Z" fill="black" fill-opacity="0.9"/>
                </svg>
                `,
            nextArrow: `
                <svg class="control control-next" width="14" height="23" viewBox="0 0 14 23" fill="gray" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M0.666262 19.6893C0.080475 20.2751 0.0804749 21.2249 0.666262 21.8107C1.25205 22.3964 2.2018 22.3964 2.78758 21.8107L12.3876 12.2107L13.4482 11.15L12.3876 10.0893L2.78758 0.489339C2.2018 -0.096448 1.25205 -0.0964481 0.666264 0.489339C0.0804767 1.07512 0.0804766 2.02487 0.666263 2.61066L9.2056 11.15L0.666262 19.6893Z" fill="black"/>
                </svg>
                `,
            responsive: [
                {
                    breakpoint: 768,
                    settings: {
                        arrows: false,
                        centerMode: true,
                        centerPadding: '25px',
                        slidesToShow: 1
                    }
                }
            ]
        });