<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 }} class="">


    <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="Press Release" textColor="text-white"/>


            <div class="grid grid-cols-3  h-100 mt-4">

                <div class="col-span-2 bg-[url('/img/media/news1.jpg')] bg-cover bg-center">


                </div>
                <div class="col-span-1 relative  rounded-tr rounded-br bg-white">


                    <div class="absolute top-0 py-4 px-4 ">
                        <a href="/">
                            <span class="text-sky-500 font-bold text-sm">23 DECEMBER 2022</span>
                            <p class="text-black  text-2xl font-bold mt-4">
                                Rashid Khan During CWC
                                Event with Fans | Episode
                                Four
                            </p>
                            <p class="text-black text-justify text-md font-bold my-3">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eius excepturi
                                fugiat
                                id pariatur veritatis voluptas? Autem consectetur itaque omnis placeat veritatis.
                                Accusantium cumque id in magnam quidem similique voluptates! Lorem ipsum dolor sit
                                amet,
                                consectetur adipisicing elit. Autem corporis delectus in incidunt quam quos ratione
                                recusandae. Accusamus aperiam aut incidunt magnam perferendis. Ad amet consequuntur,
                                earum inventore maiores maxime.
                            </p>

                        </a>

                    </div>


                </div>

            </div>
            <div class="grid grid-cols-3 gap-2  mt-2">

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

                    </div>
                    <div class="bg-white h-32 p-2 flex flex-col space-y-3 justify-between">

                        <p class="text-xl font-bold line-clamp-1">

                            Afghanistan Men in the
                            2023 IPL Auction

                        </p>
                        <p class="line-clamp-2 text-justify">

                            Which franchise and for how much?
                            What happened in the 2023 IPL auction?

                        </p>
                        <span class="text-sky-500 font-bold text-sm">

                            23 December 2022

                        </span>

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

                    </div>
                    <div class="bg-white h-32 p-2 flex flex-col space-y-3 justify-between">

                        <p class="text-xl font-bold line-clamp-1">
                            Afghanistan Men’s Test squad
                            announced for the tour of
                            Pakistan
                        </p>
                        <p class="line-clamp-2 text-justify">

                            Which franchise and for how much?
                            What happened in the 2023 IPL auction in the 2023 IPL auction in the 2023 IPL auction in the
                            2023 IPL auction?

                        </p>
                        <span class="text-sky-500 font-bold text-sm">
                            23 December 2022
                        </span>

                    </div>
                </div>
                <div class="h-full ">
                    <div class="bg-[url('/img/media/news5.jpg')] bg-cover bg-center h-60">

                    </div>
                    <div class="bg-white h-32 p-2 flex flex-col space-y-3 justify-between">

                        <p class="text-xl font-bold line-clamp-1">
                            Afghanistan name squad for
                            Men’s ODI tour of South Africa

                        </p>
                        <p class="line-clamp-2 text-justify">

                            Which franchise and for how much?
                            What happened in the 2023 IPL auction in the 2023 IPL auction in the 2023 IPL auction?

                        </p>
                        <span class="text-sky-500 font-bold text-sm">
                            23 December 2022
                        </span>

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

                    </div>
                    <div class="bg-white h-32 p-2 flex flex-col space-y-3 justify-between">

                        <p class="text-xl font-bold line-clamp-1">
                            Afghanistan Men in the
                            2023 IPL Auction
                        </p>
                        <p class="line-clamp-2 text-justify">

                            Which franchise and for how much?
                            What happened in the 2023 IPL auction?

                        </p>
                        <span class="text-sky-500 font-bold text">
                            23 December 2022
                        </span>

                    </div>
                </div>
                <div class="h-full ">
                    <div class="bg-[url('/img/media/news5.jpg')] bg-cover bg-center h-60">

                    </div>
                    <div class="bg-white h-32 p-2 flex flex-col space-y-3 justify-between">

                        <p class="text-xl font-bold line-clamp-1">
                            Afghanistan name squad for
                            Men’s ODI tour of South Africa

                        </p>
                        <p class="line-clamp-2 text-justify">

                            Which franchise and for how much?
                            What happened in the 2023 IPL auction in the 2023 IPL auction in the 2023 IPL auction?

                        </p>
                        <span class="text-sky-500 font-bold text-sm">
                            23 December 2022
                        </span>

                    </div>
                </div>

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

                    </div>
                    <div class="bg-white h-32 p-2 flex flex-col space-y-3 justify-between">

                        <p class="text-xl font-bold line-clamp-1">
                            Afghanistan Men’s Test squad
                            announced for the tour of
                            Pakistan
                        </p>
                        <p class="line-clamp-2 text-justify">

                            Which franchise and for how much?
                            What happened in the 2023 IPL auction in the 2023 IPL auction in the 2023 IPL auction in the
                            2023 IPL auction?

                        </p>
                        <span class="text-sky-500 font-bold text-sm">
                            23 December 2022
                        </span>

                    </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>