<!-- Story Section -->
<section class="container pt-6 lg:pt-13 2xl:pt-18">
    <div class="swiper story-slider py-4">
        <div class="swiper-wrapper !px-px py-2">
            <div class="swiper-slide">
                <div type="button" data-modal-target="story-modal" data-modal-toggle="story-modal" class="flex cursor-pointer flex-col items-center justify-center gap-2">
                    <!-- Thumbnail -->
                    <div class="size-20 overflow-hidden rounded-full border-[3px] border-white ring-2 ring-warning">
                        <img src="/assets/themes/blesser/images/story1.jpg" alt="story 1" />
                    </div>
                    <!-- Title -->
                    <p class="line-clamp-2 w-20 text-center text-xs">تیکا ؛ تست حافظه! تیکا ؛ تست حافظه!</p>
                </div>
            </div>
            <div class="swiper-slide">
                <div type="button" data-modal-target="story-modal" data-modal-toggle="story-modal" class="flex cursor-pointer flex-col items-center justify-center gap-2">
                    <!-- Thumbnail -->
                    <div class="size-20 overflow-hidden rounded-full border-[3px] border-white ring-2 ring-warning">
                        <img src="/assets/themes/blesser/images/story2.jpg" alt="story 1" />
                    </div>
                    <!-- Title -->
                    <p class="line-clamp-2 w-20 text-center text-xs">رکوردر صدای دانشجویی!</p>
                </div>
            </div>
            <div class="swiper-slide">
                <div type="button" data-modal-target="story-modal" data-modal-toggle="story-modal" class="flex cursor-pointer flex-col items-center justify-center gap-2">
                    <!-- Thumbnail -->
                    <div class="size-20 overflow-hidden rounded-full border-[3px] border-white ring-2 ring-warning">
                        <img src="/assets/themes/blesser/images/story3.jpg" alt="story 1" />
                    </div>
                    <!-- Title -->
                    <p class="line-clamp-2 w-20 text-center text-xs">خوشگل‌ترین ماوس دیجی‌کالا🖱</p>
                </div>
            </div>
            <div class="swiper-slide">
                <div type="button" data-modal-target="story-modal" data-modal-toggle="story-modal" class="flex cursor-pointer flex-col items-center justify-center gap-2">
                    <!-- Thumbnail -->
                    <div class="size-20 overflow-hidden rounded-full border-[3px] border-white ring-2 ring-warning">
                        <img src="/assets/themes/blesser/images/story4.jpg" alt="story 1" />
                    </div>
                    <!-- Title -->
                    <p class="line-clamp-2 w-20 text-center text-xs">تخته برش ریور</p>
                </div>
            </div>
            <div class="swiper-slide">
                <div type="button" data-modal-target="story-modal" data-modal-toggle="story-modal" class="flex cursor-pointer flex-col items-center justify-center gap-2">
                    <!-- Thumbnail -->
                    <div class="size-20 overflow-hidden rounded-full border-[3px] border-white ring-2 ring-warning">
                        <img src="/assets/themes/blesser/images/story5.jpg" alt="story 1" />
                    </div>
                    <!-- Title -->
                    <p class="line-clamp-2 w-20 text-center text-xs">خمیردندان و مسواکِ کودکِ</p>
                </div>
            </div>
            <div class="swiper-slide">
                <div type="button" data-modal-target="story-modal" data-modal-toggle="story-modal" class="flex cursor-pointer flex-col items-center justify-center gap-2">
                    <!-- Thumbnail -->
                    <div class="size-20 overflow-hidden rounded-full border-[3px] border-white ring-2 ring-warning">
                        <img src="/assets/themes/blesser/images/story6.jpg" alt="story 1" />
                    </div>
                    <!-- Title -->
                    <p class="line-clamp-2 w-20 text-center text-xs">پاور تیکا ؛ تست حافظه!</p>
                </div>
            </div>
            <div class="swiper-slide">
                <div type="button" data-modal-target="story-modal" data-modal-toggle="story-modal" class="flex cursor-pointer flex-col items-center justify-center gap-2">
                    <!-- Thumbnail -->
                    <div class="size-20 overflow-hidden rounded-full border-[3px] border-white ring-2 ring-warning">
                        <img src="/assets/themes/blesser/images/story7.jpg" alt="story 1" />
                    </div>
                    <!-- Title -->
                    <p class="line-clamp-2 w-20 text-center text-xs">اسباب کشی‌تو راحت می‌کنه</p>
                </div>
            </div>
            <div class="swiper-slide">
                <div type="button" data-modal-target="story-modal" data-modal-toggle="story-modal" class="flex cursor-pointer flex-col items-center justify-center gap-2">
                    <!-- Thumbnail -->
                    <div class="size-20 overflow-hidden rounded-full border-[3px] border-white ring-2 ring-warning">
                        <img src="/assets/themes/blesser/images/story8.jpg" alt="story 1" />
                    </div>
                    <!-- Title -->
                    <p class="line-clamp-2 w-20 text-center text-xs">جورابای درست حسابی</p>
                </div>
            </div>
            <div class="swiper-slide">
                <div type="button" data-modal-target="story-modal" data-modal-toggle="story-modal" class="flex cursor-pointer flex-col items-center justify-center gap-2">
                    <!-- Thumbnail -->
                    <div class="size-20 overflow-hidden rounded-full border-[3px] border-white ring-2 ring-warning">
                        <img src="/assets/themes/blesser/images/story9.jpg" alt="story 1" />
                    </div>
                    <!-- Title -->
                    <p class="line-clamp-2 w-20 text-center text-xs">آیس کافی وانیلی🍧🥛</p>
                </div>
            </div>
            <div class="swiper-slide">
                <div type="button" data-modal-target="story-modal" data-modal-toggle="story-modal" class="flex cursor-pointer flex-col items-center justify-center gap-2">
                    <!-- Thumbnail -->
                    <div class="size-20 overflow-hidden rounded-full border-[3px] border-white ring-2 ring-warning">
                        <img src="/assets/themes/blesser/images/story10.jpg" alt="story 1" />
                    </div>
                    <!-- Title -->
                    <p class="line-clamp-2 w-20 text-center text-xs">یه تجربه ی متفاوت !!!!</p>
                </div>
            </div>
            <div class="swiper-slide">
                <div type="button" data-modal-target="story-modal" data-modal-toggle="story-modal" class="flex cursor-pointer flex-col items-center justify-center gap-2">
                    <!-- Thumbnail -->
                    <div class="size-20 overflow-hidden rounded-full border-[3px] border-white ring-2 ring-warning">
                        <img src="/assets/themes/blesser/images/story11.jpg" alt="story 1" />
                    </div>
                    <!-- Title -->
                    <p class="line-clamp-2 w-20 text-center text-xs">راهنمای خرید هندزفری</p>
                </div>
            </div>
            <div class="swiper-slide">
                <div type="button" data-modal-target="story-modal" data-modal-toggle="story-modal" class="flex cursor-pointer flex-col items-center justify-center gap-2">
                    <!-- Thumbnail -->
                    <div class="size-20 overflow-hidden rounded-full border-[3px] border-white ring-2 ring-warning">
                        <img src="/assets/themes/blesser/images/story12.jpg" alt="story 1" />
                    </div>
                    <!-- Title -->
                    <p class="line-clamp-2 w-20 text-center text-xs">چرا دهان‌شویه؟🦷</p>
                </div>
            </div>
            <div class="swiper-slide">
                <div type="button" data-modal-target="story-modal" data-modal-toggle="story-modal" class="flex cursor-pointer flex-col items-center justify-center gap-2">
                    <!-- Thumbnail -->
                    <div class="size-20 overflow-hidden rounded-full border-[3px] border-white ring-2 ring-warning">
                        <img src="/assets/themes/blesser/images/story13.jpg" alt="story 1" />
                    </div>
                    <!-- Title -->
                    <p class="line-clamp-2 w-20 text-center text-xs">متر 5 متری از برند FISCO</p>
                </div>
            </div>
        </div>
        <div class="swiper-button-next main-slider-nav-button hidden md:flex"></div>
        <div class="swiper-button-prev main-slider-nav-button hidden md:flex"></div>
    </div>
</section>
