<div class="quick-facts quick-facts--{{ $block->bg_color }} block-margin-top--{{ $block->margin_type_top }} block-margin-bottom--{{$block->margin_type_bottom}}" data-controller="blocks/quick-facts" data-aos="fade-up" data-aos-delay="500" data-aos-once="true">
    @if ($block->anchor_id )
        <div id="{{ $block->anchor_id }}" class="anchor-offset"></div>
    @endif
    <div class="quick-facts__content">
        @if($block->block_title)
            <h2>
                @title($block->block_title)
            </h2>
        @endif
        <div class="quick-facts__grid" data-role="container-facts">

            @foreach($block->blockQuickFacts as $i => $fact)

                <div class="quick-facts__item" data-role="item-fact">
                    <div class="quick-facts__icon">
                        @include('frontend.svg.icon-check-product-grid')
                    </div>
                    <div class="quick-facts__info">
                        <h4>
                            @title($fact->title)
                        </h4>
                        <p>
                            @title($fact->subtitle)
                        </p>
                    </div>
                </div>

            @endforeach

        </div>
        @if (count($block->blockQuickFacts) > 3)
            <div class="quick-facts__grid-button">
                <a href="#">
                    <span data-role="more-facts" data-action="more-facts">@lang('frontend.show_more') +</span>
                    <span class="quick-facts--hide-btn" data-role="less-facts" data-action="less-facts">@lang('frontend.show_less') -</span>
                </a>
            </div>
        @endif
    </div>

</div>
