<section class="home-sections section-premium section-skin-cream premium-products-section container reveal-up py-35 py-lg-35 px-12 px-lg-20" aria-labelledby="premium-products-heading">
    <header class="premium-products-header mb-30 mb-lg-35">
        <div class="premium-products-head-row">
            <div class="premium-products-header__text">
                <p class="premium-products-eyebrow mb-10">{{ trans('home.premium_products_sub') }}</p>
                <h2 id="premium-products-heading" class="section-title premium-products-title mb-0">{{ trans('home.premium_products_title') }}</h2>
            </div>
            <a href="{{ url('/products') }}" class="premium-products-cta d-inline-flex align-items-center flex-shrink-0 text-decoration-none mt-20 mt-lg-0">
                <span>{{ trans('home.premium_products_view_all') }}</span>
                <span class="premium-products-cta__chev" aria-hidden="true"><i class="fa fa-angle-left"></i></span>
            </a>
        </div>
    </header>

    <div class="position-relative premium-products-frame">
        <div class="swiper premium-products-swiper">
            <div class="swiper-wrapper py-15 py-lg-20">
                @foreach ($premiumHomeProducts as $product)
                    <div class="swiper-slide premium-product-slide">
                        <div class="premium-product-card-shell h-100">
                            @include('web.default.includes.home._premium_product_card', ['product' => $product])
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="swiper-pagination premium-products-pagination premium-swiper-dots-shell"></div>
            <div class="swiper-button-prev premium-products-prev swiper-btn premium-products-nav-btn">
                <i class="fa fa-angle-left" aria-hidden="true"></i>
            </div>
            <div class="swiper-button-next premium-products-next swiper-btn premium-products-nav-btn">
                <i class="fa fa-angle-right" aria-hidden="true"></i>
            </div>
        </div>
    </div>
</section>
