@isset($destinations)
    <section class="bg-solitude-blue">
        <div class="container">
            <div class="row pb-5 align-items-center justify-content-center">
                <div class="col-12 col-lg-7 text-center position-relative page-title-double-large">
                    <div class="d-flex flex-column justify-content-center extra-very-small-screen">
                        <h3 class="text-dark-gray alt-font ls-minus-1px fw-700 mb-20px">Explore Your Global Horizons: Study
                            in Top Destinations</h1>
                    </div>
                </div>
            </div>
            @php
                $transformArray = [80, 40, 80];
                $flipperDirectionArray = ['to-left', 'to-top', 'to-right', 'to-left', 'to-bottom', 'to-bottom'];
            @endphp

            <div class="row row-cols-1 row-cols-lg-3 row-cols-md-2 justify-content-center">
                @foreach ($destinations as $index => $destination)
                    @php
                        $transformIndex = $index % count($transformArray);
                        $directionIndex = $index % count($flipperDirectionArray);
                    @endphp
                    <div class="col text-center rotate-box-style-01 lg-mb-45px"
                        data-bottom-top="transform: translateY({{ $transformArray[$transformIndex] }}px)"
                        data-top-bottom="transform: translateY(-{{ $transformArray[$transformIndex] }}px)">
                        <div class="rm-rotate-box text-center">
                            <div class="flipper {{ $flipperDirectionArray[$directionIndex] }}">
                                <div class="thumb-wrap">
                                    <div class="front overflow-hidden h-250px md-h-250px border-radius-4px overflow-hidden"
                                        style="background-image:url('{{ $destination->image }}')">
                                    </div>
                                    <div class="back border-radius-4px overflow-hidden">
                                        <div class="box-overlay bg-dark-gray"></div>
                                        <div class="content-wrap last-paragraph-no-margin">
                                            <p class="text-white p-4 opacity-7 lh-30 sm-w-70 xs-w-100 mx-auto">
                                                {{ str()->limit($destination->short_description, 250) }}</p>
                                        </div>
                                    </div>
                                </div>
                                <span class="fs-20 d-inline-block mt-30px fw-600 text-dark-gray">
                                    <a href="{{ route('country.single', $destination->slug)}}" class="destination">Study in {{ $destination->title }}</a>
                                </span>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
    </section>
@endisset