{{-- Horizontal carousel (scroll-snap; arrows added by cinema.js, swipe on mobile). --}}
@if (! empty($items))
    <section class="cn-row relative" aria-labelledby="row-{{ $key }}">
        <div class="flex items-end justify-between gap-4">
            <h2 id="row-{{ $key }}" class="text-xl font-bold text-white md:text-2xl">{{ $title }}</h2>
            @isset($more)<a href="{{ $more }}" class="text-sm font-semibold text-accent hover:underline">{{ __('movies.see_all') }}</a>@endisset
        </div>
        <div class="relative mt-4">
            <div class="-mx-4 flex snap-x snap-mandatory gap-4 overflow-x-auto scroll-smooth px-4 pb-2 [scrollbar-width:none]" data-carousel>
                @foreach ($items as $c)@include($site->themeView('movies.partials.card'), ['size' => 'row'])@endforeach
            </div>
            <button type="button" data-carousel-prev class="cn-arrow start-0" aria-label="{{ __('movies.previous') }}"><x-site.icon name="chevron-left" class="size-6" /></button>
            <button type="button" data-carousel-next class="cn-arrow end-0" aria-label="{{ __('movies.next') }}"><x-site.icon name="chevron-right" class="size-6" /></button>
        </div>
    </section>
@endif