@if ($works)

    <div class="overflow-visible swiper swiper-slider-works">
        <div class="swiper-wrapper">

            @foreach ($works as $work)
                <div class="swiper-slide">
                    <a href="{{ $work['link'] }}" class="group">
                        <div class="overflow-hidden rounded-2xl">
                            <img src="{{ $work['thumb'] }}" alt="{{ $work['title'] }}" width="900" height="600"
                                class="transition-transform duration-300 ease-out group-hover:scale-110" />
                        </div>
                        <div class="p-4 text-lg font-semibold">{{ $work['title'] }}</div>
                    </a>
                </div>
            @endforeach

        </div>
    </div>

    <div class="flex items-center justify-between gap-4 mt-4 lg:mt-6 xl:mt-8">
        <div>
            <div class="flex items-center gap-4 lg:gap-6 xl:gap-8">
                <div class="prev-work">
                    <img src="{{ asset('images/swiper-button-prev.svg') }}" alt="Előző" width="62"
                        height="62" />
                </div>
                <div class="next-work">
                    <img src="{{ asset('images/swiper-button-next.svg') }}" alt="Következő" width="62"
                        height="62" />
                </div>
            </div>
        </div>
        <div class="hidden sm:flex">
            <a href="/munkaim" class="button button--inverse">Összes megtekintése</a>
        </div>
    </div>


@endif