<section class="bg-body-tertiary">
    <div class="container">
        <div class="row">

            <!-- Titles master slider -->
            <div class="col-md-6 col-lg-5 d-flex flex-column">
                <div class="py-4 mt-auto">
                    <div class="swiper pb-1 pt-3 pt-sm-4 py-md-4 py-lg-3"
                        data-swiper='{
              "spaceBetween": 24,
              "loop": true,
              "speed": 400,
              "controlSlider": "#heroImages",
              "pagination": {
                "el": "#sliderBullets",
                "clickable": true
              },
              "autoplay": {
                "delay": 5500,
                "disableOnInteraction": false
              }
            }'>
                        <div class="swiper-wrapper align-items-center">

                            <!-- Item -->
                            <div class="swiper-slide text-center text-md-start">
                                <p class="fs-xl mb-2 mb-lg-3 mb-xl-4">The new warm collection</p>
                                <h2 class="display-4 text-uppercase mb-4 mb-xl-5">New fall <br
                                        class="d-none d-md-inline">season 2024</h2>
                                <a class="btn btn-lg btn-outline-dark" href="{{ route('second', ['shop', 'catalog-fashion']) }}">
                                    Shop now
                                    <i class="ci-arrow-up-right fs-lg ms-2 me-n1"></i>
                                </a>
                            </div>

                            <!-- Item -->
                            <div class="swiper-slide text-center text-md-start">
                                <p class="fs-xl mb-2 mb-lg-3 mb-xl-4">Ready for the party?</p>
                                <h2 class="display-4 text-uppercase mb-4 mb-xl-5">Choose outfits for parties</h2>
                                <a class="btn btn-lg btn-outline-dark" href="{{ route('second', ['shop', 'catalog-fashion']) }}">
                                    Shop now
                                    <i class="ci-arrow-up-right fs-lg ms-2 me-n1"></i>
                                </a>
                            </div>

                            <!-- Item -->
                            <div class="swiper-slide text-center text-md-start">
                                <p class="fs-xl mb-2 mb-lg-3 mb-xl-4">Shades of gray for your look</p>
                                <h2 class="display-4 text-uppercase mb-4 mb-xl-5">-50% on gray Collection</h2>
                                <a class="btn btn-lg btn-outline-dark" href="{{ route('second', ['shop', 'catalog-fashion']) }}">
                                    Shop now
                                    <i class="ci-arrow-up-right fs-lg ms-2 me-n1"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Slider bullets (pagination) -->
                <div
                    class="d-flex justify-content-center justify-content-md-start pb-4 pb-xl-5 mt-n1 mt-md-auto mb-md-3 mb-lg-4">
                    <div class="swiper-pagination position-static w-auto pb-1" id="sliderBullets"></div>
                </div>
            </div>

            <!-- Linked images (controlled slider) -->
            <div class="col-md-6 col-lg-7 align-self-end">
                <div class="position-relative ms-md-n4">
                    <div class="ratio" style="--cz-aspect-ratio: calc(662 / 770 * 100%)"></div>
                    <div class="swiper position-absolute top-0 start-0 w-100 h-100 user-select-none"
                        id="heroImages"
                        data-swiper='{
              "allowTouchMove": false,
              "loop": true,
              "effect": "fade",
              "fadeEffect": {
                "crossFade": true
              }
            }'>
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <img src="/img/home/fashion/v1/hero-slider/01.png" class="rtl-flip"
                                    alt="Image">
                            </div>
                            <div class="swiper-slide">
                                <img src="/img/home/fashion/v1/hero-slider/02.png" class="rtl-flip"
                                    alt="Image">
                            </div>
                            <div class="swiper-slide">
                                <img src="/img/home/fashion/v1/hero-slider/03.png" class="rtl-flip"
                                    alt="Image">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
