<section data-component-type="Content" data-component-slug="sports-template-news-media">
<section class=" bg-[#F6F6F6] pb-[60px] md:pb-[30px]">
  <!-- Section Header -->
  <div class="text-center pt-[70px]">
    <h1 data-node="news_title" data-node-type="text" data-node-label="News Section Title" data-node-default="NEWS & MEDIA" class="text-dark text-[40px] text-center mt-3 mb-3 font-bold py-2 rounded-md">
      {{news_title}}
    </h1>

    <h1 data-node="news_subtitle1" data-node-type="text" data-node-label="News Subtitle Line 1" data-node-default="Lorem ipsum dolor sit amet consectetur. Justo enim diam massa" class="text-[#999999] text-[20px] font-bold py-1 rounded-md">
      {{news_subtitle1}}
    </h1>

    <h1 data-node="news_subtitle2" data-node-type="text" data-node-label="News Subtitle Line 2" data-node-default="aliquam condimentum et mauris leo" class="text-[#999999] text-[20px] font-bold py-1 rounded-md">
      {{news_subtitle2}}
    </h1>
  </div>

  <!-- News Cards Grid -->
  <div class="lg:max-w-[90%] max-w-full mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 mt-[50px] lg:mt-[80px]">
    <!-- News Card 1 -->
    <div class="w-full relative flex items-start justify-center h-[250px] lg:h-[500px]">
      <div class="group shadow-xl shadow-[#11111180] relative transition-all duration-500 w-[80%] lg:h-96 md:h-56 h-full flex items-center justify-center hover:shadow-2xl overflow-hidden" data-node="news1_bg" data-node-type="file" data-node-label="News Card 1 Background" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767338046/seltrix/templates/sports-template/NEWSimages/news1.png" style="background: url({{news1_bg}}); background-size: cover; background-position: center;">
        <div class="absolute inset-0 bg-gradient-to-t from-[#111111] via-[#11111180] to-transparent"></div>
        <div class="absolute bottom-4 left-4 z-10">
          <div class="bg-[#940F0F] w-[110px] px-2 py-1 rounded-md">
            <h1 data-node="news1_label" data-node-type="text" data-node-label="News Card 1 Label" data-node-default="HIGHLIGHTS" class="text-white text-center text-[14px]">
              {{news1_label}}
            </h1>
          </div>

          <h1 data-node="news1_title1" data-node-type="text" data-node-label="News Card 1 Title Line 1" data-node-default="LOREM IPSUM DOLOR SIT AMET" class="text-white md:text-[13px] lg:text-[19px] font-bold mt-3">
            {{news1_title1}}
          </h1>

          <h1 data-node="news1_title2" data-node-type="text" data-node-label="News Card 1 Title Line 2" data-node-default="CONSECTETUR. JUSTO ENIM DIAM MASSA" class="text-white md:text-[13px] lg:text-[19px] font-bold">
            {{news1_title2}}
          </h1>

          <a data-node="news1_link" data-node-type="page_links" data-node-label="News Card 1 Read More" data-node-default="#" href="{{news1_link}}" class="text-white md:text-[9px] lg:text-[15px] mt-[20px] font-bold relative inline-block after:content-[''] after:block after:w-1/2 after:h-[2px] after:bg-white after:mt-2">
           
          <span data-node="news1_text" data-node-type="text" data-node-label="News Card 1 Read More" data-node-default="READ MORE">
           {{news1_text}}
          </span>
            
          </a>
        </div>
      </div>
    </div>

    <!-- News Card 2 -->
    <div class="w-full relative flex items-start justify-center h-[250px] lg:h-[500px]">
      <div class="group shadow-xl shadow-[#11111180] relative transition-all duration-500 w-[80%] lg:h-96 md:h-56 h-full flex items-center justify-center hover:shadow-2xl overflow-hidden" data-node="news2_bg" data-node-type="file" data-node-label="News Card 2 Background" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767338048/seltrix/templates/sports-template/NEWSimages/news2.png" style="background-image: url({{news2_bg}}); background-size: cover; background-position: center;">
        <div class="absolute inset-0 bg-gradient-to-t from-[#111111] via-[#11111180] to-transparent"></div>
        <div class="absolute bottom-4 left-4 z-10">
          <div class="bg-[#940F0F] w-[110px] px-2 py-1 rounded-md">
            <h1 data-node="news2_label" data-node-type="text" data-node-label="News Card 2 Label" data-node-default="HIGHLIGHTS" class="text-white text-center text-[14px]">
              {{news2_label}}
            </h1>
          </div>

          <h1 data-node="news2_title1" data-node-type="text" data-node-label="News Card 2 Title Line 1" data-node-default="LOREM IPSUM DOLOR SIT AMET" class="text-white md:text-[13px] lg:text-[19px] font-bold mt-3">
            {{news2_title1}}
          </h1>

          <h1 data-node="news2_title2" data-node-type="text" data-node-label="News Card 2 Title Line 2" data-node-default="CONSECTETUR. JUSTO ENIM DIAM MASSA" class="text-white md:text-[13px] lg:text-[19px] font-bold">
            {{news2_title2}}
          </h1>

          <a data-node="news2_link" data-node-type="text" data-node-label="News Card 2 Read More" data-node-default="#" href="{{news2_link}}" class="text-white md:text-[9px] lg:text-[15px] mt-[20px] font-bold relative inline-block after:content-[''] after:block after:w-1/2 after:h-[2px] after:bg-white after:mt-2">
           
            <span data-node="news2_text" data-node-type="text" data-node-label="News Card 2 Read More" data-node-default="READ MORE">
             {{news2_text}}
            </span>
          </a>
        </div>
      </div>
    </div>

    <!-- News List (Hidden on Mobile) -->
    <div class="w-full relative flex items-start justify-center h-[250px] lg:h-[500px] hidden lg:flex">
      <div>
        <!-- List items can be repeated with data-node -->
        <div class="relative flex flex-col items-center transition-all duration-500 md:flex-row md:max-w-lg mb-5">
       
          <div class="overflow-hidden md:w-36 h-28">
            <img data-node="news_list1_img" data-node-type="file" data-node-label="News List 1 file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767338045/seltrix/templates/sports-template/NEWSimages/l3.png" class="w-full h-full object-cover" src="{{news_list1_img}}">
          </div>
          <div class="px-3 py-1">
            <h4 data-node="news_list1_date" data-node-type="text" data-node-label="News List 1 Date" data-node-default="August 16, 2025" class="text-[#999999] text-[15px]">
              {{news_list1_date}}
            </h4>

            <h1 data-node="news_list1_title" data-node-type="text" data-node-label="News List 1 Title" data-node-default="LOREM IPSUM DOLOR SIT" class="text-[#111111] md:text-[13px] lg:text-[16px] font-bold mt-2">
              {{news_list1_title}}
            </h1>

            <a data-node="news_list1_link" data-node-type="page_links" data-node-label="News List 1 Read More" data-node-default="#" href="{{{{news_list1_link}}}}" class="text-[#940F0F] md:text-[9px] lg:text-[14px] mt-[20px] lg:mt-[5px] xl:mt-[20px] relative inline-block after:content-[''] after:block after:w-1/2 after:h-[2px] after:bg-[#940F0F] after:mt-2">
              

              <span data-node="news_list1_text" data-node-type="text" data-node-label="News List 1 Read text" data-node-default="READ MORE">
               {{news_list1_text}}
              </span>
            </a>
          </div>

          
        </div>
          


         <div>
        <!-- List items can be repeated with data-node -->
        <div class="relative flex flex-col items-center transition-all duration-500 md:flex-row md:max-w-lg mb-5">
       
          <div class="overflow-hidden md:w-36 h-28">
            <img data-node="news_list2_img" data-node-type="file" data-node-label="News List 2 file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767338042/seltrix/templates/sports-template/NEWSimages/l1.png" class="w-full h-full object-cover" src="{{news_list2_img}}">
          </div>
          <div class="px-3 py-1">
            <h4 data-node="news_list2_date" data-node-type="text" data-node-label="News List 2 Date" data-node-default="August 16, 2025" class="text-[#999999] text-[15px]">
              {{news_list2_date}}
            </h4>

            <h1 data-node="news_list2_title" data-node-type="text" data-node-label="News List 2 Title" data-node-default="LOREM IPSUM DOLOR SIT" class="text-[#111111] md:text-[13px] lg:text-[16px] font-bold mt-2">
              {{news_list2_title}}
            </h1>

            <a data-node="news_list2_link" data-node-type="page_links" data-node-label="News List 2 Read More" data-node-default="#" href="{{news_list2_link}}" class="text-[#940F0F] md:text-[9px] lg:text-[14px] mt-[20px] lg:mt-[5px] xl:mt-[20px] relative inline-block after:content-[''] after:block after:w-1/2 after:h-[2px] after:bg-[#940F0F] after:mt-2">
              <span data-node="news_list2_text" data-node-type="text" data-node-label="News List 2 Read More" data-node-default="READ MORE">
              {{news_list2_text}}
              </span>
            </a>
          </div>

          
        </div>
          

         <div>
        <!-- List items can be repeated with data-node -->
        <div class="relative flex flex-col items-center transition-all duration-500 md:flex-row md:max-w-lg mb-5">
       
          <div class="overflow-hidden md:w-36 h-28">
            <img data-node="news_list3_img" data-node-type="file" data-node-label="News List 3 file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767338044/seltrix/templates/sports-template/NEWSimages/l2.png" class="w-full h-full object-cover" src="{{news_list3_img}}">
          </div>
          <div class="px-3 py-1">
            <h4 data-node="news_list3_date" data-node-type="text" data-node-label="News List 3 Date" data-node-default="August 16, 2025" class="text-[#999999] text-[15px]">
              {{news_list3_date}}
            </h4>

            <h1 data-node="news_list3_title" data-node-type="text" data-node-label="News List 3 Title" data-node-default="LOREM IPSUM DOLOR SIT" class="text-[#111111] md:text-[13px] lg:text-[16px] font-bold mt-2">
              {{news_list3_title}}
            </h1>

            <a data-node="news_list3_link" data-node-type="page_links" data-node-label="News List 3 Read More" data-node-default="#" href="{{news_list3_link}}" class="text-[#940F0F] md:text-[9px] lg:text-[14px] mt-[20px] lg:mt-[5px] xl:mt-[20px] relative inline-block after:content-[''] after:block after:w-1/2 after:h-[2px] after:bg-[#940F0F] after:mt-2">
              
              <span data-node="news_list3_text" data-node-type="text" data-node-label="News List 3 Read More" data-node-default="READ MORE">
              {{news_list3_text}}
                 
              </span>
            </a>
          </div>

          
        </div>

        <!-- Add more list items similarly (news_list_2, news_list_3 ...) -->
      </div>
    </div>
  </div>
</div></div></section>
</section>