<section class="container pb-5 mb-1 mb-sm-3 mb-lg-4 mb-xl-5">
            <div class="swiper my-md-3"
                data-swiper='{
          "slidesPerView": 2,
          "pagination": {
            "el": ".swiper-pagination",
            "clickable": true
          },
          "breakpoints": {
            "500": {
              "slidesPerView": 3
            },
            "768": {
              "slidesPerView": 4,
              "spaceBetween": 12
            },
            "992": {
              "slidesPerView": 5,
              "spaceBetween": 20
            },
            "1200": {
              "slidesPerView": 6,
              "spaceBetween": 24
            }
          }
        }'>
                <div class="swiper-wrapper">

                    

                    <!-- Item -->
                    @foreach($brands as $brand)
                    <a class="swiper-slide text-body" href="#!" aria-label="{{ $brand->name }}">
                        <img src="{{ $brand->image_url }}" alt="{{ $brand->name }}" class="object-fit-contain">
                    </a>

                    @endforeach

                </div>

                <!-- Pagination (Bullets) -->
                <div class="swiper-pagination position-static mt-3"></div>
            </div>
        </section>