@if (isset($ArrRecentPhotoGalleryHomePage) && count($ArrRecentPhotoGalleryHomePage) > 0)
    <div class="col-12 p-0 mt-5 hapanings-bg">

        <div class="row ml-0 mr-0">
            <div class="container">

                <h3 class="category-heading mb-4 text-white font-1">HAPPE<span class="yellow-color">NINGS</span><small
                        class="view-more text-white"><a href="{{ url('all/happenings') }}" class="text-white">VIEW
                            <span class="yellow-color">MORE</span></a> <i
                            class="fas fa-chevron-right ml-2 yellow-color"></i> </small> </h3>

            </div>
        </div>


        <div class="col-md-12 p-0 float-left mb-5" style="margin-bottom: 8rem !important;">

            <div id="mixedSlider3">

                <div class="MS-content">
                    @foreach ($ArrRecentPhotoGalleryHomePage as $key => $photo)
                        <div class="item">
                            <!-- Card -->

                            <div class="row m-0 p-2">
                                <div class="col-md-7 p-0">
                                    <a href="{{ url('happening/') }}/{!! \App\Helpers\Helper::rscUrl($photo['title']) !!}-{{ $photo['owner_id'] }}">
                                        <img src="{{ config('variables.SiteCmsurlalbum') . $photo['photopath'] }}"
                                            class="img-fluid rounded" style="height:200px;">
                                    </a>
                                </div>
                                <div class="col-md-5 p-4">
                                    <a href="{{ url('happening/') }}/{!! \App\Helpers\Helper::rscUrl($photo['title']) !!}-{{ $photo['owner_id'] }}"
                                        class="text-dark">
                                        <h4 class="font-1"> {{ $photo['title'] }}</h4>
                                    </a>

                                    <p class="hap-style"><i class="fas fa-images red-color"></i> <em>Happenings
                                            Images</em>
                                    </p>
                                </div>
                            </div>

                            <!-- Card -->
                        </div>
                    @endforeach



                </div>

                <div class="MS-controls">
                    <button class="MS-left"><a class="btn-floating btn-lg bg-white"><i
                                class="fas fa-chevron-left text-danger"></i></a></button>

                    <button class="MS-right"><a class="btn-floating btn-lg bg-white"><i
                                class="fas fa-chevron-right text-danger"></i></a></button>
                </div>
            </div>

        </div>





    </div>
@endif