<div class="flex flex-col bg-contain bg-no-repeat bg bg-center justify-center px-4 md:px-[200px] my-[80px]"
    style="background-image: url('{{ asset('./images/background/bg-2.png') }}');">
    <div class="flex flex-col md:items-start justify-center items-center w-full md:w-[40%] w-[100%] mt-4 md:mt-0"
        data-aos="fade-up">

        <x-header-section subtext="BERITA {{ $settings['nama kampus'] ?? 'Nama kampus tidak tersedia' }}" subtext-color="#30c906" title=" " title-color="#30c906" />
        
        <div class="swiper mySwiper my-[50px] md:w-[1300px] w-full">
            <div class="swiper-wrapper md:space-x-[10px] px-8 pb-8">
                @foreach ($berita as $index => $project)
                    <div class="swiper-slide">
                        <div class="relative bg-[#F9F9F9]/30 shadow-xl rounded-lg w-[400px] sm:w-[300px] md:w-[350px]">
                            <img src="{{ asset('./storage/berita/' . $project->file_foto) }}"
                                class="rounded-t-lg h-[175px] w-full object-cover object-center" alt="{{ $project->judul }}">
                            
                            <div class="px-[20px] flex flex-col gap-y-3 pt-[10px] pb-[20px]">
                                <div class="flex flex-row justify-between gap-x-2 items-start">
                                    <h1 class="font-poppins text-primary font-bold text-[18px] uppercase leading-tight">
                                        {{ Str::limit($project->judul, 50) }}
                                    </h1>
                                </div>
                                
                                {{-- TANGGAL DI KIRI - FORMAT BOLD --}}
                                <div class="font-bold text-gray-600 text-sm text-left">
                                    {{ \Carbon\Carbon::parse($project->tanggal_berita)->translatedFormat('d F Y') }}
                                </div>
                                
                                <p class="font-dmsans text-black font-light text-start text-sm mt-1">
                                    {{ Str::limit(strip_tags($project->content), 120) }}...
                                </p>
                                
                                <div class="my-2 flex justify-start">
                                    <a href="{{ route('fe-detailberita', $project->id_berita) }}"
                                        class="text-accent hover:text-white w-[140px] text-[10px] md:text-[11px] duration-200 md:w-[150px] border border-[2px] border-accent hover:border hover:border-[#F9F9F9]/15 hover:rounded-full hover:border-[2px] font-Anek hover:bg-accent hover:border-accent font-bold rounded-full px-4 md:px-2 md:py-[7px] py-2.5 text-center me-2 mb-2">
                                        BACA SELENGKAPNYA
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
</div>