<!-- Carousel -->
                <div class="position-relative mx-2 mx-sm-0">
                    <div class="swiper"
                        data-swiper='{
              "slidesPerView": 1,
              "spaceBetween": 24,
              "loop": true,
              "autoHeight": true,
              "navigation": {
                "prevEl": ".btn-prev",
                "nextEl": ".btn-next"
              },
              "breakpoints": {
                "500": {
                  "slidesPerView": 2
                },
                "992": {
                  "slidesPerView": 3
                }
              }
            }'>
                        <div class="swiper-wrapper">
                            <!-- Article -->
                            <article class="swiper-slide">
                                <a class="ratio d-flex hover-effect-scale rounded overflow-hidden"
                                    href="{{ route('second', ['help', 'single-article-v2']) }}" style="--cz-aspect-ratio: calc(306 / 416 * 100%)">
                                    <img src="/img/help/article01.jpg" class="hover-effect-target" alt="Image">
                                </a>
                                <div class="pt-4">
                                    <div class="text-body-tertiary fs-xs pb-2 mt-n1 mb-1">October 2, 2024</div>
                                <h3 class="h5 mb-2">How to Choose the Right Golf Ball</h3>
                                <p class="mb-3">Selecting the perfect golf ball can significantly impact your game. Our comprehensive
                                    guide covers everything from compression and cover material to dimple patterns and
                                    swing weight considerations.</p>
                                <a class="btn btn-sm btn-primary" href="#">Read More</a>
                            </div>
                            </article>

                            <!-- Article -->
                            <article class="swiper-slide">
                                <a class="ratio d-flex hover-effect-scale rounded overflow-hidden"
                                    href="{{ route('second', ['help', 'single-article-v2']) }}" style="--cz-aspect-ratio: calc(306 / 416 * 100%)">
                                    <img src="/img/help/article02.jpg" class="hover-effect-target" alt="Image">
                                </a>
                                <div class="pt-4">
                                    <div class="text-body-tertiary fs-xs pb-2 mt-n1 mb-1">October 2, 2024</div>
                                    <h3 class="h5 mb-2">Golf Club Membership Benefits</h3>
                                    <p class="mb-3">Join our exclusive golf club for premium benefits including early access
                                    to new products, member-only tournaments, and special discounts throughout the
                                    year.</p>
                                    <a class="btn btn-sm btn-primary" href="#">Learn More</a>
                            </div>
                            </article>

                            <!-- Article -->
                            <article class="swiper-slide">
                                <a class="ratio d-flex hover-effect-scale rounded overflow-hidden"
                                    href="{{ route('second', ['help', 'single-article-v2']) }}" style="--cz-aspect-ratio: calc(306 / 416 * 100%)">
                                    <img src="/img/help/article03.jpg" class="hover-effect-target" alt="Image">
                                </a>
                                <div class="pt-4">
                                    <div class="text-body-tertiary fs-xs pb-2 mt-n1 mb-1">October 2, 2024</div>
                                    <h3 class="h5 mb-2">Understanding Golf Course Ratings</h3>
                                    <p class="mb-3">Learn how to interpret golf course difficulty ratings and slope
                                    ratings to choose courses that match your skill level perfectly.</p>
                                    <a class="btn btn-sm btn-primary" href="#">Explore Courses</a>
                            </div>
                            </article>
                        </div>

                        <!-- Prev button -->
                        <div class="position-absolute top-50 start-0 z-2 translate-middle hover-effect-target mt-n5">
                            <button type="button"
                                class="btn btn-prev btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-start"
                                aria-label="Prev">
                                <i class="ci-chevron-left fs-lg animate-target"></i>
                            </button>
                        </div>

                        <!-- Next button -->
                        <div class="position-absolute top-50 start-100 z-2 translate-middle hover-effect-target mt-n5">
                            <button type="button"
                                class="btn btn-next btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-end"
                                aria-label="Next">
                                <i class="ci-chevron-right fs-lg animate-target"></i>
                            </button>
                        </div>
                    </div>
