<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

<style>
    .uc-reviews {
        overflow: hidden;
    }
    .uc-reviews .t528 {
        max-width: 1200px;
        margin: 0 auto;
        overflow: visible;
    }
    .uc-reviews .t528__container {
        display: block;
        max-width: unset;
        user-select: none;
    }
    .uc-reviews .slick-arrow { display: none !important; }
    .uc-reviews .slick-track {
        display: flex;
    }
    .uc-reviews .slick-track .t528__col {
        position: relative;
        display: flex;
        flex-direction: column-reverse;
        justify-content: space-between;
        max-width: unset;
        margin: 0 48px !important;
        padding: 24px 0;

        transition: opacity 0.2s;
    }
    .uc-reviews .t528__col:after {
        content: "";
        position: absolute;
        left: -48px; top: 0;
        height: 100%;
        width: 1px;
        background-color: transparent;
        transition: background-color 0.2s;
    }
    .uc-reviews .t528__col:not(.slick-active) {
        opacity: 0;
    }
    .uc-reviews .t528__col.slick-active +.slick-active:after {
        background-color: #67A7E1;
    }
    .uc-reviews .person {
        display: flex;
        align-items: center;
    }
    .uc-reviews .person * { margin: 0; }
    .uc-reviews .text {
        align-self: flex-start;
        flex: 1;
        margin-left: 16px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .uc-reviews .text * { text-align: left; }

    .uc-reviews .t528__text {
        margin: 0;
        text-align: left;
        margin-bottom: 40px;
        max-width: unset !important;
    }

    .uc-reviews .nav {
        display: flex;
        margin-left: 24px;
        margin-top: 48px;
        width: 147px;
        justify-content: space-between;
    }
    .uc-reviews .nav .arrow {
        width: 24px; height: 24px;
        cursor: pointer;
    }
    .uc-reviews .nav .arrow-prev {
        background-image: url(https://static.tildacdn.com/tild3262-3937-4638-b232-313138376161/lines.svg);
    }
    .uc-reviews .nav .arrow-next {
        background-image: url(https://static.tildacdn.com/tild3165-3236-4736-b639-303364623032/lines.svg);
    }

    .uc-reviews .pagination {
        font-family: 'RandomGrotesque', Arial, sans-serif;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        color: #ABC8FF;
    }


    .uc-reviews .current-page {
        color: white;
    }

    @media (max-width: 960px) {
        .uc-reviews .slick-list {
            overflow: hidden;
        }
        .uc-reviews .t528__col {
            height: fit-content;
            justify-content: flex-end;
        }
    }
</style>

<script>
$(() => {
    for(const block of document.querySelectorAll(".uc-reviews")) {
        for(const card of block.querySelectorAll(".t528__col")) {
            $(card).find(".t528__title, .t528__descr").wrapAll('<div class="text"/>');
            $(card).find(".t528__bgimg, .text").wrapAll('<div class="person"/>');
        }

        const $container = $(block).find(".t528__container");

        $container.slick({
            dots: false,
            arrows: true,
            infinite: false,
            speed: 300,
            slidesToShow: 2,
            slidesToScroll: 2,
            centerMode: false,
            variableWidth: false,
            draggable: true,
            swipe: true,

            responsive: [
                {
                  breakpoint: 960,
                  settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1,
                    adaptiveHeight: true
                  }
                },
            ]
        });

        const slidesCount = $container.find(".slick-slide").length;

        const $nav = $(`<div class="nav">
        <div class="arrow arrow-prev"></div>
        <div class="pagination"><span class="current-page"></span> / <span class="total-pages"></span></div>
        <div class="arrow arrow-next"></div>
    </div>`)
            .appendTo($(block).find(".t528"));

        const $currentPage = $nav.find(".current-page");
        const $totalPages = $nav.find(".total-pages");
        function updatePagination(slideIndex) {
            const slidesToShow = $container.slick("slickGetOption", "slidesToShow");

            $totalPages.text(
                zeroPad(Math.ceil(slidesCount / slidesToShow), 2)
            );
            $currentPage.text(
                zeroPad(Math.floor(slideIndex / slidesToShow) + 1, 2)
            );
        }
        $container.on("beforeChange", (e, slick, currentSlide, nextSlide) => updatePagination(nextSlide));
        updatePagination($container.slick("slickCurrentSlide"));

        $(block).find(".arrow-prev").click(() => $(block).find(".slick-prev").click());
        $(block).find(".arrow-next").click(() => $(block).find(".slick-next").click());

        setTimeout(() => {
            $(block).find(".t-text-clamp__btn").click(() => setTimeout(
                () => $container.slick("slickSetOption", "", "", true),
                100
            ))
        }, 100);
    }
})

function zeroPad(number, places) {
    return ('0'.repeat(places) + number).slice(-places);
}


</script>