@if (count($categories) > 0)
    <div id="categories" class="container lg:max-w-screen-lg mx-auto bg-white">
        <div class="p-4 pt-8 pb-4">
            <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 ">Award Categories</h2>
            @foreach($categories as $category)
                <h2 class="font-altgothic text-base uppercase text-techcapital-gray-dark">
                    <img src="{{ asset('/svg/logotype-red.svg') }}" class="w-4 h-4 inline-block mr-4" alt="{{ $category->name }} Category" title="{{ $category->name }} Category" loading="lazy"/>
                    <span class="inline-block mr-4">{{$category->name}}</span>
                    @if ($category->filename && $category->url && $category->caption)
                        <span class="flex lg:inline-flex">
                            <span class="inline-block mr-4 font-sans text-xs text-techcapital-gray-dark">{{ $category->caption }}</span>
                            <span class="inline-block"><a href="{{ $category->url }}" target="_blank" rel="nofollow" title="{{ $category->caption }}"><img src="/image/{{ $category->filename }}/80/20" alt="{{ $category->caption }}" title="{{ $category->caption }}" class="grayscale"></a></span>
                        </span>
                    @endif
                    @if ($category->caption && !($category->filename && $category->url))
                        <span class="flex lg:inline-flex">
                            <span class="inline-block mr-4 font-sans text-xs text-techcapital-gray-dark">{{ $category->caption }}</span>
                        </span>
                    @endif
                </h2>
                <p class="text-sm text-techcapital-gray-dark @if (!$loop->last) mb-4 @endif">{!! nl2br($category->content) !!}</p>
            @endforeach
        </div>
    </div>
@endif