<div
    class="{{ [
        'swiper',
        'pointer-events-none',
        'max-w-full',
        'md:flex',
        'md:justify-center',
        'md:rounded-md',
        color,
        text_color
    ] | classes | collapse_whitespace }}"
    x-init="
        new Swiper($el, {
            slidesPerView: 1,
            centeredSlides: true,
            grabCursor: true,
            spaceBetween: 0,
            loop: true,
            speed: 1500,
            autoplay: {
                delay: 2500,
                disableOnInteraction: true,
            },
            breakpoints: {
                768: {
                    slidesPerView: 3,
                    centeredSlides: false,
                    spaceBetween: 0,
                },
            },
        });
    "
>
    <div class="swiper-wrapper inline-flex items-center py-5 md:justify-between md:gap-6 md:max-w-[1080px] md:px-4 md:flex-row md:w-full">
        {{ usps }}
            <div class="swiper-slide flex justify-center md:!w-fit">
                <div class="flex items-center gap-x-2">
                    <div class="size-8">
                        {{ icon }}
                    </div>
                    <div class="font-bold">
                        {{ text }}
                    </div>
                </div>
            </div>
        {{ /usps }}
    </div>
</div>
