<script>
    import {fade} from 'svelte/transition';
    import TopBorder from "$lib/components/shared/TopBorder.svelte";
    import ViewAllButton from "$lib/components/shared/ViewAllButton.svelte";

</script>
<div in:fade={{ duration: 300, delay: 0 }}>


    <section class=" w-full     from-blue-950 to-blue-800 bg-gradient-to-l py-20">
        <div class=" max-w-6xl m-auto">


            <TopBorder title="Our Magazines" textColor="text-white"/>

            <div class="grid grid-cols-4 gap-2  mt-5">

                <div class="h-full ">
                    <div class="bg-[url('/img/media/news3.jpg')] bg-cover bg-center h-96 flex flex-col justify-end">

                        <div class="caption flex flex-col space-y-2 items-center pb-2">
                            <p class="text-white text-md font-bold bg-sky-500 px-1 line-clamp-1">
                                Lorem ipsum dolor sit amet 2023 JUN
                            </p>

                            <a href="/"
                               class="text-white text-center bg-black w-24 rounded transition duration-300 hover:shadow-white hover:shadow">Download</a>
                        </div>
                    </div>
                </div>

                <div class="h-full ">
                    <div class="bg-[url('/img/media/news4.jpg')] bg-cover bg-center h-96 flex flex-col justify-end">

                        <div class="caption flex flex-col space-y-2 items-center pb-2">
                            <p class="text-white text-md font-bold bg-sky-500  px-1 line-clamp-1 ">
                                Lorem ipsum dolor sit amet 2023 JUN
                            </p>

                            <a href="/"
                               class="text-white text-center bg-black w-24 rounded transition duration-300 hover:shadow-white hover:shadow">Download</a>
                        </div>
                    </div>
                </div>
                <div class="h-full ">
                    <div class="bg-[url('/img/media/news5.jpg')] bg-cover bg-center h-96 flex flex-col justify-end">

                        <div class="caption flex flex-col space-y-2 items-center pb-2">
                            <p class="text-white text-md font-bold bg-sky-500  px-1 line-clamp-1 ">
                                Lorem ipsum dolor sit amet 2023 JUN
                            </p>

                            <a href="/"
                               class="text-white text-center bg-black w-24 rounded transition duration-300 hover:shadow-white hover:shadow">Download</a>
                        </div>
                    </div>
                </div>
                <div class="h-full ">
                    <div class="bg-[url('/img/media/news5.jpg')] bg-cover bg-center h-96 flex flex-col justify-end">

                        <div class="caption flex flex-col space-y-2 items-center pb-2">
                            <p class="text-white text-md font-bold bg-sky-500  px-1 line-clamp-1 ">
                                Lorem ipsum dolor sit amet 2023 JUN
                            </p>

                            <a href="/"
                               class="text-white text-center bg-black w-24 rounded transition duration-300 hover:shadow-white hover:shadow">Download</a>
                        </div>
                    </div>
                </div>


            </div>

            <div class="flex flex-row justify-center py-4">
                <a href="/" class="mt-4 text-white bg-sky-500 px-4">View More</a>
            </div>

        </div>

    </section>

</div>