<script>
    import BottomBorder from "$lib/components/shared/BottomBorder.svelte";
    import ViewAllButton from "$lib/components/shared/ViewAllButton.svelte";
    import TopBorder from "$lib/components/shared/TopBorder.svelte";
    import {t, locale} from '$lib/translations.js'
    import { inView } from '$lib/config/inView';
</script>
<section use:inView class="news from-blue-950 to-blue-900  bg-gradient-to-b pt-20 px-4 -mt-1" style="direction: ltr;">
    <div>

        <div class="max-w-6xl flex  ltr:flex-row rtl:flex-row-reverse items-right justify-end m-auto h-2 ">

        <ViewAllButton label="{$t('common.read-all')}" link="/media/press-release" bgColor="bg-white"
                       iconColor="bg-sky-400"
                       textColor="text-blue-950"/>


    </div>
    <div class="max-w-6xl flex flex-col  m-auto h-8 ">

        <TopBorder title="{$t('common.press-release')}" textColor="text-white" borderColor="border-gray-400"
                   height="h-2" labelWidth="w-[30%]"/>

    </div>

    <div class="max-w-6xl m-auto grid grid-cols-3  h-44 {$locale !== 'en-US' ? 'direction-rtl' : ''}">
        <div class="press-release-img h-full bg-[url('/img/news/4.jpg')] bg-cover bg-center  col-span-1">
        </div>
        <div class="press-release-body h-full col-span-2 bg-sky-500 p-4 flex flex-col space-y-4">
            <h3 class="text-md lg:text-xl text-white font-bold line-clamp-1">
                ACB STANDS FIRM IN STANCE AGAINST SNIXER SPORTS
            </h3>
            <p class="text-sm lg:text-md text-white line-clamp-4 text-justify">
                ACB will respond to the Arbitration case from a position of strength and cooperate fully with London
                Court of International Arbitration in light of legal provisions in the Commercial Rights Agreement with
                Snixer Sports.
            </p>
        </div>
    </div>

    <BottomBorder bgColor="" height="h-2" borderColor="border-gray-400"/>
    </div>
</section>