<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="Match Report" textColor="text-white"/>

            <div class="grid grid-cols-3 mt-10">

                <div class="col-span-3 text-right">
                    <span class="text-white font-bold text-sm">23 DECEMBER 2023</span>
                </div>

                <div class="h-full col-span-1">
                    <div class="bg-[url('/img/media/news3.jpg')] bg-cover bg-center h-64 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="relative col-span-2 bg-white h-full p-4 flex flex-col space-y-4">
                    <p class="bg-sky-500 text-white font-bold px-2 tracking-wider">Fazal Haq Farooqi Afghanistan Men in
                        the 2023 IPL
                        Auction</p>
                    <p class="text-justify px-2 font-medium tracking-wide line-clamp-6">The 2023 IPL auction took place
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. At consequatur expedita inventore nam
                        officiis pariatur saepe sapiente? Accusantium alias, aliquam amet, debitis dolores est magnam
                        maiores minus officia optio, quas!
                    </p>
                    <a href="/" class="absolute bottom-5 right-5 bg-sky-500 text-white font-bold px-2">
                        Read More
                    </a>
                </div>


            </div>

            <div class="grid grid-cols-3 mt-10">

                <div class="col-span-3 text-right">
                    <span class="text-white font-bold text-sm">23 DECEMBER 2023</span>
                </div>

                <div class="h-full col-span-1">
                    <div class="bg-[url('/img/media/news3.jpg')] bg-cover bg-center h-64 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="relative col-span-2 bg-white h-full p-4 flex flex-col space-y-4">
                    <p class="bg-sky-500 text-white font-bold px-2 tracking-wider">Fazal Haq Farooqi Afghanistan Men in
                        the 2023 IPL
                        Auction</p>
                    <p class="text-justify px-2 font-medium tracking-wide line-clamp-6">The 2023 IPL auction took place
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam asperiores assumenda aut
                        cumque eos ex excepturi fugiat laboriosam minima molestiae necessitatibus nesciunt odio quidem
                        quo, reprehenderit sint tempora voluptates.
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur eaque expedita explicabo
                        fuga fugiat in labore nesciunt perferendis porro possimus quisquam reprehenderit saepe sed, sint
                        tempore tenetur ullam. Esse, voluptatem.
                    </p>
                    <a href="/" class="absolute bottom-5 right-5 bg-sky-500 text-white font-bold px-2">
                        Read More
                    </a>
                </div>


            </div>

            <div class="grid grid-cols-3 mt-10">

                <div class="col-span-3 text-right">
                    <span class="text-white font-bold text-sm">23 DECEMBER 2023</span>
                </div>

                <div class="h-full col-span-1">
                    <div class="bg-[url('/img/media/news3.jpg')] bg-cover bg-center h-64 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="relative col-span-2 bg-white h-full p-4 flex flex-col space-y-4">
                    <p class="bg-sky-500 text-white font-bold px-2 tracking-wider">Fazal Haq Farooqi Afghanistan Men in
                        the 2023 IPL
                        Auction</p>
                    <p class="text-justify px-2 font-medium tracking-wide line-clamp-6">The 2023 IPL auction took place
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque doloribus eos et expedita id
                        magnam modi, molestiae mollitia necessitatibus perspiciatis praesentium, quibusdam suscipit
                        temporibus ut vel! Cum dolores eos facere.
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci autem commodi debitis, ea,
                        eligendi fugit harum impedit iure labore libero modi quasi quibusdam sapiente sed voluptatem.
                        Maiores officiis sequi totam?
                    </p>
                    <a href="/" class="absolute bottom-5 right-5 bg-sky-500 text-white font-bold px-2">
                        Read More
                    </a>
                </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>