@if (count($sponsors) > 0)
    <div id="sponsors" class="container lg:max-w-screen-lg mx-auto bg-white">
        <div class="p-4 pt-8 pb-8">
            <div class="grid grid-cols-2 lg:grid-cols-12 gap-4">
                @foreach($sponsors as $sponsor)
                <div class="col-span-1 lg:col-span-2">
                    <a href="#" title="View more details on {{$sponsor->name}}" wire:click.prevent="toggleSponsorPopup('{{$sponsor->name}}')" class="block">
                        <span class="block text-center text-xxs text-gray-400 uppercase mb-2">{{ $sponsor->relationship }}</span>
                        <img src="/image/{{ $sponsor->filename }}/304/130" alt="{{ $sponsor->name }}" title="{{ $sponsor->name }}" class="w-full grayscale" loading="lazy">
                    </a>
                </div>
                @endforeach
            </div>
        </div>
    </div>
@endif