@extends('layouts.frontend')

@section('content')
@include('layouts.frontend-partial.breadcrumb')

<section class="sectionGap lg:pt-16">
    <div class="container">
        <div class="w-full grid gap-8 md:grid-cols-2 lg:grid-cols-4">
            @if (!empty($teams) && $teams->isNotEmpty())
            @foreach ($teams as $key => $team)
            <div class="grid gap-4" data-aos="fade-up" data-aos-duration="{{ 1000 + $key * 200 }}">
                @if (!empty($team->image))
                <div class="aspect-[338/375]">
                    <img class="rounded-lg size-full object-cover" src="{{ asset($team->image) }}"
                        alt="{{ $team->name }}">
                </div>
                @endif

                <div>
                    <p class="text-sm text-gray2">
                        {{ !empty($team->designation) ? $team->designation : '' }}
                    </p>

                    <h4 class="text-base md:text-xl text-black font-bold">
                        {{ !empty($team->name) ? $team->name : '' }}
                    </h4>
                </div>
            </div>
            @endforeach
            @endif
        </div>
    </div>
</section>
@endsection