<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 STISIP IMAM BONJOL" subtext-color="#019934" title=" " title-color="#124185" />
        <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="">
                            <h1
                                class="absolute right-1 top-1 bg-accent p-1 w-[100px] rounded-full font-dmsans font-semibold text-[11px]" style="color:#fff;">
                                {{ $project->tanggal_berita }}
                            </h1>
                            <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-center">
                                    <h1 class="font-poppins text-primary font-bold text-[20px] uppercase">
                                        {{ $project->judul }}
                                    </h1>
                                </div>
                                <p class="font-dmsans text-black font-light text-start">
                                    {{ Str::limit(strip_tags($project->content), 150) }}...</p>
                                <div class="my-3 flex justify-start">
                                    <a href="{{ route('fe-detailberita', $project->id_berita) }}"
                                        class="text-accent hover:text-white w-[140px] text-[9px] 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-4 md:mb-2">
                                        BACA SELENGKAPNYA
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
</div>
