@if(isset($data) && is_array($data) && !empty($data))
<section id="design"
  class="overflow-hidden bg-black background-position-center-top background-no-repeat pt-15 sm-pt-50px position-relative" style="background-size:cover; background-image: url('{{ asset($data['bg-image']) }}')">
  <div class="container-fluid">
    <div class="row justify-content-center">
      <div class="col-xl-8 text-center position-relative sm-mb-40px"
        data-top-bottom="transform: scale(1); filter: opacity(1)"
        data-bottom-top="transform: scale(1.3); filter: opacity(0)">
        <span class="fs-110 md-fs-90 xs-fs-80 text-white fw-700 ls-minus-5px">{{ $data['title'] }}</span>
      </div>
    </div>
    <div class="mt-13">
      <div class="row row-cols-1 justify-content-center">
        <div class="col"
          data-anime='{ "translateY": [0, 0], "opacity": [0,1], "duration": 1200, "delay": 50, "staggervalue": 150, "easing": "easeOutQuad" }'>
          <div class="swiper"
            data-slider-options='{ "slidesPerView": 1, "spaceBetween": 70, "loopedSlides": true, "autoplay": { "delay": 3000, "disableOnInteraction": false }, "keyboard": { "enabled": true, "onlyInViewport": true }, "breakpoints": { "1400": { "slidesPerView":7 }, "992": { "slidesPerView": 4, "spaceBetween": 80  }, "768": { "slidesPerView": 3, "spaceBetween": 60 }, "576": { "slidesPerView": 2, "spaceBetween": 45 } }, "effect": "slide" }'>
            <div class="swiper-wrapper text-center">
              @foreach($data['content_items'] as $item)
              <div class="swiper-slide">
                @if(isset($item['url']) && !empty($item['url']))
                <a href="{{ $item['url'] }}" class="d-block">
                  <div class="position-relative">
                    <img class="border-radius-100" src="{{ asset($item['item_img']) }}" alt="" />
                  </div>
                  @if(isset($item['title']) && !empty($item['title']))
                  <div class="mt-25px">
                    <span class="text-white fs-20 lh-24 fw-600 d-block">{{ $item['title'] }}</span>
                  </div>
                  @endif
                  @if(isset($item['subtitle']) && !empty($item['subtitle']))
                  <div class="mt-25px">
                    <span class="text-white">{{ $item['subtitle'] }}</span>
                  </div>
                  @endif
                </a>
                @endif
              </div>
              @endforeach
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
@endif