@if (count($judges) > 0)
    <div id="judges" class="container lg:max-w-screen-lg mx-auto bg-white">
        <div class="p-4 pt-8 pb-8">
            <div class="relative">
                <div class="grid grid-cols-12 gap-4">
                    <div class="col-span-12 lg:col-span-4">
                        <div>
                            <h2 class="font-sans uppercase text-xs mb-2 border-l-8 border-techcapital-red pl-2 text-techcapital-gray-dark  flex items-center">The Tech Capital</h2>
                            <h2 class="font-altgothic uppercase text-3xl mb-8 text-techcapital-gray-dark ">Judges</h2>
                            <div class="mb-8">
                                <ul>
                                    <li class="inline-block mr-4">
                                        <a href="https://www.linkedin.com/company/the-tech-capital" target="_blank" rel="noopener" title="Connect on LinkedIn">
                                            <img src="{{ asset('/svg/linkedin.svg') }}" alt="Connect on LinkedIn" title="Connect on LinkedIn" class="w-4 h-4" loading="lazy"/>    
                                        </a>
                                    </li>
                                    <li class="inline-block mr-4">
                                        <a href="https://twitter.com/thetechcapital_" target="_blank" rel="noopener" title="Follow us on Twitter">
                                            <img src="{{ asset('/svg/twitter.svg') }}" alt="Follow us on Twitter" title="Follow us on Twitter" class="w-4 h-4" loading="lazy"/>
                                        </a>
                                    </li>
                                    <li class="inline-block mr-4">
                                        <a href="https://instagram.com/thetechcapital_" target="_blank" rel="noopener" title="Follow us on Instagram">
                                            <img src="{{ asset('/svg/instagram.svg') }}" alt="Follow us on Instagram" title="Follow us on Instagram" class="w-4 h-4" loading="lazy"/>    
                                        </a>
                                    </li>                                
                                    <li class="inline-block mr-4">
                                        <a href="https://www.facebook.com/The-Tech-Capital-101679965480510" target="_blank" rel="noopener" title="Friend us on Facebook">
                                            <img src="{{ asset('/svg/facebook.svg') }}" alt="Friend us on Facebook" title="Friend us on Facebook" class="w-4 h-4" loading="lazy"/>    
                                        </a>
                                    </li>                                
                                    <li class="inline-block mr-4">
                                        <a href="https://www.youtube.com/channel/UCPZ8yuPvtECZCwV2g9OkX1w" target="_blank" rel="noopener" title="Watch us on YouTube">
                                            <img src="{{ asset('/svg/youtube.svg') }}" alt="Watch us on YouTube" title="Watch us on YouTube" class="w-4 h-4" loading="lazy"/>    
                                        </a>
                                    </li>    
                                </ul>
                            </div>
                            <x-article :page="$page"/>
                        </div>
                    </div>
                    <div class="col-span-12 lg:col-span-8 relative">
                        <div class="grid grid-cols-2 lg:grid-cols-12 gap-4">
                            @foreach($judges as $judge)
                                <div class="col-span-1 lg:col-span-4 text-center">
                                    <a href="" wire:click.prevent="toggleJudgePopup('{{$judge->name}}')">
                                        <img src="/image/{{ $judge->filename }}/120/120" alt="{{ $judge->name }}" title="{{ $judge->name }}" class="rounded-full w-24 h-24 mx-auto border border-techcapital-gray-ultra p-1 mb-2 filter grayscale" loading="lazy">
                                    </a>
                                    <h2 class="font-serif text-techcapital-gray-dark font-bold text-sm">
                                        <a href="" wire:click.prevent="toggleJudgePopup('{{$judge->name}}')">{{ $judge->name }}</a>                                    
                                    </h2>
                                    <p class="font-sans text-xs text-techcapital-gray-dark uppercase">{{ $judge->company }}</p>
                                    <p class="font-sans text-xs text-techcapital-red uppercase">{{ $judge->position }}</p>
                                </div>
                            @endforeach
                        </div>    
                    </div>
                </div>
            </div>
        </div>
    </div>
@endif