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

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