Адаптация кастомного слайдера в Тильде?

Question

[Nosov_Design]

Всем добрый вечер!
Помогите, пожалуйста, разобраться.
Суть вопроса - нужно адаптировать под планшет и мобильную версию кастомный слайдер в конструкторе тильда.
Есть хтмл код, которым слайдер добавлялся:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
 
<script>
(function () {
    // Id блока, в котором будет слайдер 
    let block = $("#rec252698740");
    // Class элемента, в котором будет находиться слайдер
    let wrap = $(".tn-elem__2526987407114285884575");
    // Id блоков, которые будут слайдами
    let slides = $("#rec252815215, #rec252751037, #rec252750135, #rec252715541");
 
    wrap.addClass("tildoshnaya-slider-owl");
    let box = wrap.find(".tn-atom");
    box.append('<div class="owl-carousel owl-theme"></div>');
    slides.appendTo(block.find('.owl-carousel'));
    let owl = wrap.find('.owl-carousel').owlCarousel({
        // Зациклить слайдер - true
        // Без зацикленности - false
        loop:true,
        nav:false,
        dots: false,
        // Колличество карточек
        items: 1,
 
        // Адаптивность
        responsive:{
            // 0 это минимальная ширина экрана, при которой включается следующая часть кода
            // 0:{ 
            //    items: 1 это колличество слайдов на экране
            //     items:1
            // },
            0:{
                items:1
            },
            640:{
                items:1
            },
            960:{
                items:1
            },
        }
        // Адаптивность: конец
    })
 
 
    block.find("[href='#slider_left']").click(function(){
        owl.trigger('prev.owl.carousel');
    })
    block.find("[href='#slider_right']").click(function(){
        owl.trigger('next.owl.carousel');
    })
}());
</script>
 
 
 
<style>
/* tildoshnaya_  */
    .tildoshnaya-slider-owl .t-rec .t396__artboard  {
        /* Указываем высоту слайда */
        height: 400px !important;
        /* Указываем ширину слайда */
        width: 1200px !important;
    }
    .tildoshnaya-slider-owl {
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: stretch;
        align-content: stretch;
    }
</style>

Каждый элемент слайдера это отдельный zero block (всего 4 слайда), т.е. 4 отдельных блока.
Собственно сейчас это выглядит так (3й блок, смотреть лучше с декстопа) - swissperfection.tilda.ws
Как этот слайдер можно адаптировать под остальные устройства? Может что-то нужно прописать в коде выше?
Я полнейший нуб в этом, надеюсь очень на адекватные советы опытных ребят.