<section class="overflow-hidden relative pt-4 bg-home-foreground" id="brand-slider" aria-label="Brand Slider">
    <div class="flex gap-6 items-center cursor-grab active:cursor-grabbing" id="brand-track" style="touch-action: pan-y;">
        @foreach ($brands as $brand)
            <div class="flex flex-col items-center flex-shrink-0 py-5">
                <img src="{{ $brand['image'] }}" alt="{{ $brand['name'] }}" class="w-12 h-12 object-contain rounded-xl">
                <h3 class="mt-1 text-base font-bold text-center text-white">
                    {{ $brand['name'] }}
                </h3>
            </div>
        @endforeach
    </div>
</section>
