@if ($index % 2 == 0)
<div class="card card-img-scale bg-transparent overflow-hidden mb-6 mb-xl-8">
    <div class="row g-xl-6 align-items-center">
        <div class="col-lg-6">
            <!-- Card Image -->
            <div class="card-img-scale-wrapper rounded-2 h-100">
                <img src="{{$project['featured_image']}}" class="img-scale" alt="portfolio-img">
            </div>
        </div>

        <!-- Content -->
        <div class="col-lg-6">
            <!-- Card body -->
            <div class="card-body h-100 px-0 p-xl-5">
                <!-- Client -->
                <img src="{{$project['brand_logo']}}" class="h-30px mb-3 mb-lg-4" alt="Client-img">
                <!-- Title -->
                <h4 class="card-title">{{ $project['main_title']}}</h4>
                <p class="card-text mb-3 mb-lg-4">{{$project['main_description']}}</p>
                <!-- List -->
                <div class="d-flex gap-2 gap-sm-3 gap-lg-1 flex-lg-column flex-wrap mb-3 mb-lg-4">
                    <div><i class="fa-solid fa-circle fa-2xs text-primary me-2"></i>{{$project['project_duration']}}</div>
                    <span>{{$project['tags']}}</span>
                    <span>{{$project['stacks']}}</span>
                </div>
                <!-- Button -->
                <a href="{{ route('projects.show', ['slug' => $project['slug']])}}" class="text-primary-hover stretched-link heading-color mb-0">Voir l'étude de cas<i class="fa-solid fa-arrow-right-long fa-fw ms-2"></i></a>
            </div>
        </div>
    </div>
</div>
@else
<div class="card card-img-scale bg-transparent overflow-hidden mb-6 mb-xl-8">
    <div class="row g-xl-6 align-items-center">
        <!-- Content -->
        <div class="col-lg-6 order-2">
            <!-- Card body -->
            <div class="card-body text-lg-end h-100 px-0 p-xl-5">
                <!-- Client -->
                <img src="{{$project['brand_logo']}}" class="h-30px mb-3 mb-lg-4" alt="Client-img">
                <!-- Title -->
                <h4 class="card-title">{{ $project['main_title']}}</h4>
                <p class="card-text mb-3 mb-lg-4">{{$project['main_description']}}</p>
                <!-- List -->
                <div class="d-flex justify-content-lg-end gap-2 gap-sm-3 gap-lg-1 flex-lg-column flex-wrap mb-3 mb-lg-4">
                    <div><i class="fa-solid fa-circle fa-2xs text-primary me-2"></i>{{$project['project_duration']}}</div>
                    <span>{{$project['tags']}}</span>
                    <span>{{$project['stacks']}}</span>
                </div>
                <!-- Button -->
                <a href="{{ route('projects.show', ['slug' => $project['slug']])}}" class="text-primary-hover stretched-link heading-color mb-0">Voir l'étude de cas<i class="fa-solid fa-arrow-right-long fa-fw ms-2"></i></a>
            </div>
        </div>

        <div class="col-lg-6 order-1 order-lg-2">
            <div class="card-img-scale-wrapper rounded-2 overflow-hidden h-100">
                <!-- Card Image -->
                <img src="{{$project['featured_image']}}" class="img-scale" alt="portfolio-img">
            </div>
        </div>
    </div>
</div>
@endif