<!--Стили желательно перенести в HEAD страницы-->
<style>
    :root {
        /*Отступ слайдера слева*/
        /*Задается для всех ширин, которые есть в нулевом блоке*/
        /*Это значение будет работать до 640px*/
        --block-padding: max(3.125vw, 10px);
    }
    
    /*Чтобы отступ сбоку был равен сделанному в нулевом блоке нужно задать его для всех разрешенений нулевого блока*/
    /*Если какого-разрешения не хватает нужно скопировать целиком весь медиазапрос и вставить ниже последнего, 
    либо в порядке возрастания значений*/
    /*Если в каком-то разрешении отключен автоскейл нужно вместо max() написать просто 10px (свое значение)*/
    /*Если какое-то разрешение не нужно, то конструкцию с ним нужно удалить*/
    @media screen and (min-width: 640px) {
        :root {
            /*Это значение будет работать от 640px до 960px*/
            --block-padding: max(3.125vw, 20px);
        }
    }
    @media screen and (min-width: 960px) {
        :root {
            /*Это значение будет работать от 960px до 1200px*/
            --block-padding: max(2.083vw, 20px);
        }
    }
    @media screen and (min-width: 1200px) {
        :root {
            /*Это значение будет работать от 1200px до 1600px*/
            --block-padding: max(1.563vw, 20px);
        }
    }
    @media screen and (min-width: 1600px) {
        :root {
            /*Это значение будет работать от 1600px*/
            --block-padding: max(1.25vw, 20px);
        }
    }
    
    
    /*Кнопки*/
    /*Если слайдер не зациклен, то когда мотать некуда кнопка для перемотки с 0.5 прозрачности*/
    .swiper-button-disabled {opacity: 0.5;}
    .swiper-prev,.swiper-next {cursor: pointer;}
    .swiper-button-lock {display: block!important;}
    
    .uc-slider .t774{padding:0 var(--block-padding);box-sizing:border-box;overflow:hidden}.uc-slider .t-card__container{max-width:100%!important;padding:0!important}.uc-slider .t774__col{display:flex;margin-left:0!important;margin-bottom:0!important;padding:0!important;max-width:100%!important;height:auto!important}.uc-slider .t774__wrapper{width:100%}
</style>

<!--Код может не работать в Беларуси из-за блокировки cdn.jsdelivr.net-->

<!--Дополнительно вставить в HEAD страницы этот код ↓ -->
<link rel="preconnect" href="https://cdn.jsdelivr.net" />
<!--Дополнительно вставить в HEAD страницы этот код ↑ -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<script>
    document.addEventListener("DOMContentLoaded", () => {
        function addSlider(className) {
            document.querySelectorAll('.t774__separator').forEach(e => e.remove());

            let parentBlock = document.querySelector(className), 
                sliderContainer = parentBlock.querySelector('.t774'),
                sliderWrapper = parentBlock.querySelector('.t774__container'),
                sliderItem = parentBlock.querySelectorAll('.t774__col');
                
            sliderContainer.classList.add('swiper-container');
            sliderWrapper.classList.add('swiper-wrapper');
            sliderItem.forEach((slide) => slide.classList.add('swiper-slide'));
            
            let swiperEl = `${className} .swiper-container`;
            
            const slide = new Swiper(swiperEl, {
                // закомментировать строку ниже, если слайдер не нужно зацикливать
                loop: "true",
                // если слайдер не зациклен и хочется листать слайдер не по отдельному слайду, а как мышкой вертанулось
                // то нужно раскоментить строку ниже
                // freeMode: true,
                
                // количество отображаемых слайдов, можно указывать десятичные
                slidesPerView: 3.1,
                // расстояние между слайдами, задается не в стилях
                centeredSlides: true,
                spaceBetween: 20,
                // нужен ли хватающий курсор
                grabCursor: false,
                // можно ли управлять клавишами
                keyboard: {
                  enabled: true,
                  onlyInViewport: false,
                },
                // значения для разных разрешений, к примеру можно задать другой отступ между слайдами и отображение
                breakpoints: {
                    320: {
                        // от 320 до 640 будет показываться один полный слайд и 2/10 второго
                        // расстояние будет 10px
                        slidesPerView: 1.2,
                        spaceBetween: 10,
                    },
                    640: {
                        slidesPerView: 1.4,
                        spaceBetween: 10,
                    },
                    960: {
                        slidesPerView: 2.1,
                        spaceBetween: 20,
                    },
                    1200: {
                        slidesPerView: 3.1,
                        spaceBetween: 20
                    }
                },
                // Если навигации в слайдере нет, то удалить эту конструкцию ↓
                navigation: {
                    nextEl: '.swiper-next',
                    prevEl: '.swiper-prev',
                },
                // Если навигации в слайдере нет, то удалить эту конструкцию ↑
            });
            
            slide.on('slideChange', function () {
                t_lazyload_update();
            });
        }
        
        // скопировать для нового слайдера, вставить ниже и 
        addSlider(".uc-slider");
    });
</script>

<!--Стили желательно перенести в HEAD страницы-->
<!--Коды нужно сжать и убрать комментарии-->
<!--Растяжение блока по типу автоскейла, но работающее везде, без скриптов, только стили-->
<!--Будут растягиваться: заголовок, параграф, размер текста в кнопке, отступы в блоке с текстом -->
<!--Все размеры нужно указывать без px в конце-->
<style>
    :root {
        --scale: 100vw / 320;
        /*Отступы в тексте карточки*/
        --text-padding: 10;
        /*Размер заголовка*/
        --title-size: 20;
        /*Размер текста*/
        --text-size: 12;
        /*Высота кнопки*/
        --button-height: 40;
        /*Размер текста в кнопке*/
        --button-size: 12;
    }
    
    /*В медиазапросах переменные перечислены в том-же порядке*/
    /*Если какого-разрешения не хватает нужно скопировать целиком весь медиазапрос и вставить ниже последнего, 
    либо в порядке возрастания значений. В переменной --scale заменить значение после / на то, которое указано в min-width*/
    /*Если есть ненужный медиазапрос, то его тоже нужно удалить*/

    /*Если в каком-то разрешении нет автоскейла, то для значения --scale нужно указать 1*/
    @media screen and (min-width: 640px) {
        :root {
            --scale: 100vw / 640;
            
            /*Если размер элементов не меняется на каждом разрешении, то можно удалить на таких разрешениях эти переменные ↓*/
            --text-padding: 16;
            --title-size: 20;
            --text-size: 14;
            --button-height: 40;
            --button-size: 14;
            /*Если размер элементов не меняется на каждом разрешении, то можно удалить на таких разрешениях эти переменные ↑*/
        }
    }
    @media screen and (min-width: 960px) {
        :root {
            --scale: 100vw / 960;
            
            --text-padding: 16;
            --title-size: 20;
            --text-size: 14;
            --button-height: 40;
            --button-size: 14;
        }
    }
    @media screen and (min-width: 1200px) {
        :root {
            --scale: 100vw / 1200;
            
            --text-padding: 16;
            --title-size: 20;
            --text-size: 14;
            --button-height: 40;
            --button-size: 14;
        }
    }
    @media screen and (min-width: 1600px) {
        :root {
            --scale: 100vw / 1600;
            
            --text-padding: 16;
            --title-size: 20;
            --text-size: 14;
            --button-height: 40;
            --button-size: 14;
        }
    }
    
    
   .uc-slider .t-card__title{font-size:calc(var(--title-size)*var(--scale))!important}.uc-slider .t-card__descr{font-size:calc(var(--text-size)*var(--scale))!important}.uc-slider .t-card__btn{height:calc(var(--button-height)*var(--scale))!important;font-size:calc(var(--button-size)*var(--scale))!important}.uc-slider .t774__textwrapper{padding:calc(var(--text-padding)*var(--scale))!important}.uc-slider .t-card__btn-wrapper{padding:0 calc(var(--text-padding)*var(--scale))calc(var(--text-padding)*var(--scale))calc(var(--text-padding)*var(--scale))!important}
</style>