@if(isset($data) && is_array($data) && !empty($data))
<section class="pb-3 bg-gradient-very-light-gray lg-pb-40px md-pb-20px">
    <div class="container">
        <div class="row justify-content-center mb-25px">
            <div class="col-lg-5 text-center"
                data-anime='{ "el": "childs", "translateY": [50, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }'>
                <span class="text-uppercase fs-14 ls-2px fw-600">{{ $data['subtitle'] }}</span>
                <h4 class="alt-font text-dark-gray fw-700 mb-20px">
                    {{ $data['title'] }}
                </h4>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <ul class="blog-classic blog-wrapper grid-loading grid grid-4col xl-grid-4col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large"
                    data-anime='{ "el": "childs", "translateY": [50, 0], "opacity": [0,1], "duration": 600, "delay":100, "staggervalue": 150, "easing": "easeOutQuad" }'
                    style="background: transparent; padding: 0">
                    <li class="grid-sizer"></li>
                    <!-- start blog item -->
                    @foreach($data['blogcard_items'] as $blog_item)
                    <li class="grid-item">
                        <div class="card bg-transparent border-0 h-100">
                            <div class="blog-image position-relative overflow-hidden border-radius-4px">
                                <a href="{{ $blog_item['url'] }}">
                                    <img src="{{ asset($blog_item['item_img']) }}" alt="{{ $blog_item['title'] }}" loading="lazy" />
                                </a>
                            </div>
                            <div class="card-body px-0 pt-30px pb-30px xs-pb-15px">
                                <span class="fs-13 text-uppercase d-block mb-5px fw-500">
                                    <a href="{{ $blog_item['url'] }}" class="blog-date">{{ $blog_item['date'] }}</a>
                                </span>
                                <a href="{{ $blog_item['url'] }}"
                                    class="card-title alt-font fw-600 fs-17 lh-30 text-dark-gray d-inline-block w-95 sm-w-100">
                                    {{ $blog_item['title'] }}
                                </a>
                            </div>
                        </div>
                    </li>
                    @endforeach
                    <!-- end blog item -->

                </ul>
            </div>
        </div>
    </div>
</section>
@endif