<template>

<div class="bg-gray-200 dark:bg-gray-800 antialiased">
    <div class="max-w-screen-xl px-4 mx-auto 2xl:px-0">

        <div class="flex items-center justify-center py-8 dark:text-white">
        <div class="border-t border-dotted border-gray-800 flex-grow dark:border-gray-200"></div>
        <span class="px-4 text-md lg:text-xl text-center text-gray-700 font-medium lg:tracking-[1.5em] dark:text-white">our worthy promotions</span>
        <div class="border-t border-dotted border-gray-800 flex-grow dark:border-gray-200"></div>
        </div>

        <div class="container mx-auto px-4 pb-8">
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-3">
                <div class="flex justify-center items-center p-2">
                    <a href="#"><img src="@images/promotions/promotion_1.jpg" alt="Promotion 1" class="h-100"></a>
                </div>
                <div class="flex justify-center items-center p-2">
                    <a href="#"><img src="@images/promotions/promotion_2.jpg" alt="Promotion 2" class="h-100"></a>
                </div>
                <div class="flex justify-center items-center p-2">
                    <a href="#"><img src="@images/promotions/promotion_3.jpg" alt="Promotion 3" class="h-100"></a>
                </div>
            </div>
        </div>



    </div>
</div>
</template>    