<section class="position-relative">
    <div class="aspect-ratio-container" style="aspect-ratio: 900/446;">
        <div class="swiper position-absolute top-0 start-0 w-100 h-100"
            data-swiper='{
              "effect": "fade",
              "loop": true,
              "speed": 400,
              "pagination": {
                "el": ".swiper-pagination",
                "clickable": true
              },
              "autoplay": {
                "delay": 5500,
                "disableOnInteraction": false
              }
            }'
            data-bs-theme="dark">
            <div class="swiper-wrapper">

                @foreach ($items as $item)
                    <div class="swiper-slide" style="background-color: #6dafca">
                        {{-- <div class="position-absolute d-flex align-items-center w-100 h-100 z-2">
                            <div class="container mt-lg-n4">
                                <div class="row">
                                    <div class="col-9 col-sm-8 col-md-7 col-lg-6">
                                        <p class="fs-sm text-white mb-lg-4">🔥 Free shipping - order over
                                            <strong>50$</strong>
                                        </p>
                                        <h2 class="display-4 pb-2 pb-md-3 pb-lg-4">Healthy Food Available to Everyone</h2>
                                        <a class="btn btn-lg btn-outline-light rounded-pill"
                                            href="{{ route('second', ['shop', 'catalog-grocery']) }}">Shop now</a>
                                    </div>
                                </div>
                            </div>
                        </div> --}}
                        <img src="{{ env('WMS_ASSET_URL') . '/' . $item->filename }}"
                            class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rtl-flip" alt="Image">
                    </div>
                @endforeach

            </div>

            <!-- Slider pagination (Bullets) -->
            <div class="swiper-pagination pb-sm-2"></div>
        </div>
    </div>
</section>
