Slick slider slides did not stick together how to do?

Question

css

Good afternoon, I'm making a slider on a slick slider, I ran into such a problem, I set responsive breakpoints, put indents in margin, anyway, at certain slide resolutions, they stick together and there are no indents between them. How to make sure that all permissions, regardless of the responsive breakpoints of the slide, do not stick together
?

//slider features block
jQuery(function($) {
      jQuery(document).ready(function () {
        $('.slick-slider').slick({
          slidesToShow: 4,
          slidesToScroll: 1,
          autoplay: false,
          dots: true,
          arrows: false,
          infinite: false,
          responsive: [
            {
              breakpoint: 1400,
              settings: {
                slidesToShow: 3.5,
                slidesToScroll: 1,
              },
            },
            {
              breakpoint: 1200,
              settings: {
                slidesToShow: 3,
                slidesToScroll: 1,
              },
            },
            {
              breakpoint: 786,
              settings: {
                slidesToShow: 2,
                slidesToScroll: 1,
              },
            },
            {
              breakpoint: 720,
              settings: {
                slidesToShow: 1.5,
                slidesToScroll: 1,
              },
            },
            {
              breakpoint: 600,
              settings: {
                slidesToShow: 1,
                slidesToScroll: 1,
                variableWidth: true,
              },
            },
          ],
        });
      });
    });

.slick-slide {
  margin: 0 30px;
}

.slick-list {
    margin: 0 -30px;
}