@if (count($category->logos) || count($category->childrenRecursiveWithActiveLogos))
    <div class="@if ($category->isMainParent) my-10 @else mb-5 @endif">
        <h2 class="text-primary text-capitalize mb-4 
            @if ($category->isMainParent)
                fs-38 fw-bold 
            @elseif(!$category->isMainParent && count($category->childrenRecursiveWithActiveLogos))
                fs-30 fw-bold
            @else
                fs-24 text-center
            @endif
        ">
            {{ $category->name }}
        </h2>

        @if (count($category->logos))
            <div class="d-flex flex-wrap bd-highlight justify-content-center align-items-center gap-7 mb-5">
                @foreach ($category->logos as $eventLogo)
                    <div class="client-container" data-aos="zoom-in">
                        <img src="{{ asset('storage/'.($eventLogo->logo->thumbnail ?? $eventLogo->logo?->path)) }}" class="mx-auto" style="max-width: 180px" alt="{{ $eventLogo?->name }}" />
                        @if ($eventLogo->link)
                            <a href="{{ $eventLogo->link }}" target="_blank" class="stretched-link" title="{{ $eventLogo?->name }}"></a>
                        @endif
                    </div>
                @endforeach
            </div>
        @endif

        @if (count($category->childrenRecursiveWithActiveLogos))
            @foreach ($category->childrenRecursiveWithActiveLogos as $childCategory)
                @include('website.components.logos-by-recursive-category', [
                    'category' => $childCategory
                ])
            @endforeach
        @endif
    </div>
@endif