<section class=" bg-cover bg-center  pb-[60px] md:pb-[30px] md:p-[30px]" data-component-type="Content" data-component-slug="sports-template-recent">
    <div>

        <div class="lg:max-w-[90%] max-w-full mx-auto">
            <h1 data-node="recent_title" data-node-type="text" data-node-label="Recent Post Section Title" data-node-default="Recent Post" class="text-[#0C0A0A] lg:text-[28px] lg:mb-[50px] mb-[10px] px-[30px] md:px-0 font-bold">
                {{recent_title}}
            </h1>

        </div>
        <div class="lg:max-w-[90%] max-w-full lg:mx-auto  
                grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 p-[30px] md:p-[0px]   gap-6 mt-[10px] md:mt-[20px] lg:mt-[30px]">

            <div class="w-full relative flex items-start justify-center  ">

                <div class="w-full relative flex items-center justify-center h-auto">
                    <div class="grid grid-cols-1 md:grid-cols-1 gap-5 lg:w-[105%]">

                        <a href="/news-detail" class="block leading-non">
                            <div class="  border overflow-hidden mb-[15px]  ">
                                <img data-node="recent1_image" data-node-type="file" data-node-label="Recent Post 1 Image" src="{{recent1_image}}" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767338061/seltrix/templates/sports-template/recentpost/img1.png" class="w-[100%]" alt="image">
                                <div class="w-full p-6 ">

                                    <div class="flex items-center space-x-4 mb-4">

                                        <span class="flex items-center gap-3 hover:text-white transition">
                                            <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767337971/seltrix/templates/sports-template/blog-search/Icon.png" class="w-[15px] h-[15px]">
                                            <span data-node="recent1_category" data-node-type="text" data-node-label="Recent Post 1 Category" data-node-default="Lorem ipsum" class="text-[8px] text-[#666666]">{{recent1_category}}</span>
                                        </span>


                                        <span class="flex items-center gap-4 hover:text-white transition">
                                            <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767337974/seltrix/templates/sports-template/blog-search/icon3.png" class="w-[15px] h-[15px]">
                                            <span class="text-[8px] text-[#666666]" data-node="recent1_date" data-node-type="text" data-node-label="Recent Post 1 Date" data-node-default="June 19, 2025">{{recent1_date}}</span>
                                        </span>


                                        <span class="flex items-center gap-4 hover:text-white transition">
                                            <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767337973/seltrix/templates/sports-template/blog-search/icon2.png" class="w-[15px] h-[15px]">
                                            <span class="text-[8px] text-[#666666]" data-node="recent1_time" data-node-type="text" data-node-label="Recent Post 1 Time" data-node-default="5 Min Read">{{recent1_time}}</span>
                                        </span>

                                    </div>




                                    <h1 class=" text-[#0C0A0A] lg:text-[14px] mb-[15px]" data-node="recent1_title" data-node-type="text" data-node-label="Recent Post 1 Title" data-node-default="Lorem ipsum dolor sit amet consectetur.">
                                        <b> {{recent1_title}}</b>
                                    </h1>


                                    <p class="text-[9px] text-[#666666]" data-node="recent1_desc" data-node-type="text" data-node-label="Recent Post 1 Description" data-node-default="Lorem ipsum dolor sit amet consectetur. Vulputate sit mattis posuere neque rhoncus feugiat maecenas.">
                                        {{recent1_desc}}</p>
                                </div>
                            </div>
                        </a>

                    </div>




                </div>



            </div>
            <div class="w-full relative flex items-start justify-center">
                <div class="w-full relative flex items-center justify-center h-auto">
                    <div class="grid grid-cols-1 gap-5 lg:w-[105%]">

                        <a href="/news-detail" class="block leading-non">
                            <div class="border overflow-hidden mb-[15px]">

                                <img data-node="recent2_image" data-node-type="file" data-node-label="Recent Post 2 Image" src="{{recent2_image}}" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767338063/seltrix/templates/sports-template/recentpost/img2.png" class="w-full" alt="image">

                                <div class="w-full p-6">

                                    <div class="flex items-center space-x-4 mb-4">

                                        <span class="flex items-center gap-3">
                                            <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767337971/seltrix/templates/sports-template/blog-search/Icon.png" class="w-[15px] h-[15px]">
                                            <span data-node="recent2_category" data-node-type="text" data-node-label="Recent Post 2 Category" data-node-default="Lorem ipsum" class="text-[8px] text-[#666666]">{{recent2_category}}</span>
                                        </span>

                                        <span class="flex items-center gap-4">
                                            <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767337974/seltrix/templates/sports-template/blog-search/icon3.png" class="w-[15px] h-[15px]">
                                            <span data-node="recent2_date" data-node-type="text" data-node-label="Recent Post 2 Date" data-node-default="June 19, 2025" class="text-[8px] text-[#666666]">{{recent2_date}}</span>
                                        </span>

                                        <span class="flex items-center gap-4">
                                            <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767337973/seltrix/templates/sports-template/blog-search/icon2.png" class="w-[15px] h-[15px]">
                                            <span data-node="recent2_time" data-node-type="text" data-node-label="Recent Post 2 Time" data-node-default="5 Min Read" class="text-[8px] text-[#666666]">{{recent2_time}}</span>
                                        </span>

                                    </div>

                                    <h1 class="text-[#0C0A0A] lg:text-[14px] mb-[15px]" data-node="recent2_title" data-node-type="text" data-node-label="Recent Post 2 Title" data-node-default="Lorem ipsum dolor sit amet consectetur.">
                                        <b>{{recent2_title}}</b>
                                    </h1>

                                    <p class="text-[9px] text-[#666666]" data-node="recent2_desc" data-node-type="text" data-node-label="Recent Post 2 Description" data-node-default="Lorem ipsum dolor sit amet consectetur.">
                                        {{recent2_desc}}
                                    </p>

                                </div>
                            </div>
                        </a>

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


            <div class="w-full relative flex items-start justify-center">

                <div class="w-full relative flex items-center justify-center h-auto">
                    <div class="grid grid-cols-1 gap-5 lg:w-[105%]">

                        <a href="/news-detail" class="block leading-non">
                            <div class="border overflow-hidden mb-[15px]">

                                <!-- Image -->
                                <img data-node="recent3_image" data-node-type="file" data-node-label="Recent Post 3 Image" src="{{recent3_image}}" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767338064/seltrix/templates/sports-template/recentpost/img3.png" class="w-full" alt="image">

                                <div class="w-full p-6">

                                    <!-- Meta Info -->
                                    <div class="flex items-center space-x-4 mb-4">

                                        <span class="flex items-center gap-3">
                                            <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767337971/seltrix/templates/sports-template/blog-search/Icon.png" class="w-[15px] h-[15px]">
                                            <span data-node="recent3_category" data-node-type="text" data-node-label="Recent Post 3 Category" data-node-default="Lorem ipsum" class="text-[8px] text-[#666666]">
                                                {{recent3_category}}
                                            </span>
                                        </span>

                                        <span class="flex items-center gap-4">
                                            <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767337974/seltrix/templates/sports-template/blog-search/icon3.png" class="w-[15px] h-[15px]">
                                            <span data-node="recent3_date" data-node-type="text" data-node-label="Recent Post 3 Date" data-node-default="June 19, 2025" class="text-[8px] text-[#666666]">
                                                {{recent3_date}}
                                            </span>
                                        </span>

                                        <span class="flex items-center gap-4">
                                            <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767337973/seltrix/templates/sports-template/blog-search/icon2.png" class="w-[15px] h-[15px]">
                                            <span data-node="recent3_time" data-node-type="text" data-node-label="Recent Post 3 Time" data-node-default="5 Min Read" class="text-[8px] text-[#666666]">
                                                {{recent3_time}}
                                            </span>
                                        </span>

                                    </div>

                                    <!-- Title -->
                                    <h1 class="text-[#0C0A0A] lg:text-[14px] mb-[15px]" data-node="recent3_title" data-node-type="text" data-node-label="Recent Post 3 Title" data-node-default="Lorem ipsum dolor sit amet consectetur.">
                                        <b>{{recent3_title}}</b>
                                    </h1>

                                    <!-- Description -->
                                    <p class="text-[9px] text-[#666666]" data-node="recent3_desc" data-node-type="text" data-node-label="Recent Post 3 Description" data-node-default="Lorem ipsum dolor sit amet consectetur. Vulputate sit mattis posuere neque rhoncus feugiat maecenas.">
                                        {{recent3_desc}}
                                    </p>

                                </div>
                            </div>
                        </a>

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


            <div class="w-full relative flex items-start justify-center">

                <div class="w-full relative flex items-center justify-center h-auto">
                    <div class="grid grid-cols-1 gap-5 lg:w-[105%]">

                        <a href="/news-detail" class="block leading-non">
                            <div class="border overflow-hidden mb-[15px]">

                                <!-- Image -->
                                <img data-node="recent4_image" data-node-type="file" data-node-label="Recent Post 4 Image" src="{{recent4_image}}" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767338066/seltrix/templates/sports-template/recentpost/img4.png" class="w-full" alt="image">

                                <div class="w-full p-6">

                                    <!-- Meta Info -->
                                    <div class="flex items-center space-x-4 mb-4">

                                        <span class="flex items-center gap-3">
                                            <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767337971/seltrix/templates/sports-template/blog-search/Icon.png" class="w-[15px] h-[15px]">
                                            <span data-node="recent4_category" data-node-type="text" data-node-label="Recent Post 4 Category" data-node-default="Lorem ipsum" class="text-[8px] text-[#666666]">
                                                {{recent4_category}}
                                            </span>
                                        </span>

                                        <span class="flex items-center gap-4">
                                            <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767337974/seltrix/templates/sports-template/blog-search/icon3.png" class="w-[15px] h-[15px]">
                                            <span data-node="recent4_date" data-node-type="text" data-node-label="Recent Post 4 Date" data-node-default="June 19, 2025" class="text-[8px] text-[#666666]">
                                                {{recent4_date}}
                                            </span>
                                        </span>

                                        <span class="flex items-center gap-4">
                                            <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767337973/seltrix/templates/sports-template/blog-search/icon2.png" class="w-[15px] h-[15px]">
                                            <span data-node="recent4_time" data-node-type="text" data-node-label="Recent Post 4 Time" data-node-default="5 Min Read" class="text-[8px] text-[#666666]">
                                                {{recent4_time}}
                                            </span>
                                        </span>

                                    </div>

                                    <!-- Title -->
                                    <h1 class="text-[#0C0A0A] lg:text-[14px] mb-[15px]" data-node="recent4_title" data-node-type="text" data-node-label="Recent Post 4 Title" data-node-default="Lorem ipsum dolor sit amet consectetur.">
                                        <b>{{recent4_title}}</b>
                                    </h1>

                                    <!-- Description -->
                                    <p class="text-[9px] text-[#666666]" data-node="recent4_desc" data-node-type="text" data-node-label="Recent Post 4 Description" data-node-default="Lorem ipsum dolor sit amet consectetur. Vulputate sit mattis posuere neque rhoncus feugiat maecenas.">
                                        {{recent4_desc}}
                                    </p>

                                </div>
                            </div>
                        </a>

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





        </div>
</div></section>