<section class="container-xxl pb-5 mb-2 mb-sm-3 mb-lg-4 mb-xl-5">
    <h2 class="h3 text-center pb-1 pb-sm-2 pb-md-3 pb-lg-0 mb-4 mb-lg-5">Brands</h2>
    <div class="swiper pb-lg-2"
        data-swiper='{
          "slidesPerView": 1,
          "spaceBetween": 24,
          "centeredSlides": true,
          "pagination": {
            "el": ".swiper-pagination",
            "clickable": true
          },
          "breakpoints": {
            "500": {
              "slidesPerView": 2,
              "centeredSlides": false
            },
            "768": {
              "slidesPerView": 3,
              "centeredSlides": false
            },
            "992": {
              "slidesPerView": 4,
              "centeredSlides": false
            },  
            "1200": {
              "slidesPerView": 5,
              "centeredSlides": false
            }
           
          }
        }'>
        <div class="swiper-wrapper">

            @foreach ($brands as $brand)
                @if ($brand->image_url)
                    <div class="swiper-slide text-center">
                        <div
                            class="position-relative d-inline-block text-dark-emphasis bg-white border border-2 rounded-circle p-5 mb-4">
                            <img width="64" height="64" src="{{ $brand->image_url }}" alt="{{ $brand->name }}"
                                class="img-fluid">
                        </div>
                        <h3 class="h5 mb-2">
                            <a class="animate-underline stretched-link"
                                href="{{ route('product.index', ['filter[brand]' => $brand->id]) }}">
                                <span class="animate-target">{{ $brand->name }}</span>
                            </a>
                        </h3>
                        {{-- <p class="fs-sm mb-0">Foods that don't contain gluten</p> --}}
                    </div>
                @endif
            @endforeach
        </div>

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