@if(isset($data) && is_array($data) && !empty($data))
<section class="position-relative">
    <div class="container">
        <div class="row row-cols-1 row-cols-lg-4 row-cols-md-3 row-cols-sm-2 justify-content-center align-items-center"
            data-anime='{ "el": "childs", "translateY": [50, 0], "translateX": [-50, 0], "opacity": [0,1], "duration": 600, "delay":100, "staggervalue": 150, "easing": "easeOutQuad" }'>
            <!-- start categories item -->
            @foreach($data['solution_items'] as $solution_item)
            <div class="col categories-style-01 text-center mb-50px xs-mb-35px">
                <div class="categories-box">
                    <div class="icon-box position-relative mb-10px">
                        <a href="{{ $solution_item['solution_item_link'] }}"><img src="{{ asset($solution_item['solution_item_image']) }}" alt="" /></a>
                        <div
                            class="count-circle d-flex align-items-center justify-content-center w-35px h-35px bg-base-color text-white rounded-circle alt-font fw-600 fs-12">
                            {{ $solution_item['solution_item_year'] }}
                        </div>
                    </div>
                    <a href="{{ $solution_item['solution_item_link'] }}"
                        class="alt-font fw-600 fs-17 text-dark-gray text-dark-gray-hover">{{ $solution_item['solution_item_title'] }}</a>
                </div>
            </div>
            @endforeach
            <!-- end categories item -->
        </div>
    </div>
</section>
@endif