@props(['data'])
@php
    $parent = reset($data);
    $child = array_values(array_slice($data, 1));

@endphp
<section class="ttm-row padding_zero-section col_overlay_section bg-layer-equal-height ttm-bgcolor-skincolor clearfix">
    <div class="container-fluid p-0">
       <div class="row no-gutters">
          <div class="col-xl-5">
             <div class="ttm-bg ttm-col-bgcolor-yes ttm-bgcolor-darkgrey ttm-right-span spacing-4">
                <div class="ttm-col-wrapper-bg-layer ttm-bg-layer"></div>
                <div class="layer-content">
                   <!-- section title -->
                 
                   <div class="section-title">
                    @if(!empty($parent))
                    <div class="title-header">
                      
                        <h2 class="title">{{$parent['title']}}</h2>
                     </div>
                     <div class="title-desc">
                        <h5>{{$parent['description']}}</h5>
                     </div>
                    @endif
                     
                   </div>
                   <!-- section title end -->
                </div>
             </div>
          </div>
          <div class="col-xl-7">
             <div class="ttm-bg ttm-col-bgcolor-yes ttm-bgcolor-skincolor ttm-right-span spacing-5">
                <div class="ttm-col-wrapper-bg-layer ttm-bg-layer"></div>
                <div class="layer-content">
                   <div class="ml_160 res-1199-margin_left0">
                      <div class="row ttm-boxes-spacing-10px slick_slider slick-arrows-style3" data-slick='{"slidesToShow": 4, "slidesToScroll": 1, "arrows":true, "autoplay":false, "infinite":true, "responsive": [{"breakpoint":1400,"settings":{"slidesToShow": 4}} , {"breakpoint":1204,"settings":{"slidesToShow": 3}}, {"breakpoint":777,"settings":{"slidesToShow": 2}},                {"breakpoint":575,"settings":{"slidesToShow": 1}}]}'>
                        @foreach($child as $value)
                        <div class="col-lg-3 col-md-6 col-sm-6 ttm-box-col-wrapper">
                            <div class="featured-imagebox featured-imagebox-portfolio style1">
                               <!-- ttm-box-view-overlay -->
                               <div class="ttm-box-view-overlay">
                                  <!-- featured-thumbnail -->
                                  <div class="featured-thumbnail">
                                     <img class="img-fluid" style="aspect-ratio: 1 / 1;" src="{{asset('images/'.$value['image'])}}" alt="image">
                                  </div>
                                  <!-- featured-thumbnail end-->
                                  <div class="ttm-media-link">
                                     <a class="ttm_prettyphoto ttm_image" title="{{$value['title']}}" data-rel="prettyPhoto" href="{{asset('images/'.$value['image'])}}">
                                     <i class="fa fa-search"></i>
                                     </a>
                                  </div>
                               </div>
                               <!-- ttm-box-view-overlay end-->
                               <div class="featured-content">
                                  <div class="featured-title">
                                     <h3>{{$value['title']}}</h3>
                                  </div>
                               </div>
                            </div>
                            <!-- featured-icon-box end-->
                         </div>
                        @endforeach
                  
                        
                      </div>
                   </div>
                </div>
             </div>
          </div>
       </div>
       <!-- row end -->
    </div>
 </section>