import React from "react";

const LiveSports = () => {
  return (
     <div className="mt-5 md:mt-16">
      <h1 className="mb-3 md:mb-5 font-extrabold text-base md:text-3xl flex items-center gap-2">
        <span className="w-2 h-2 rounded-full bg-white"></span>
        <span>LIVE SPORTS</span>
      </h1>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 itms-center gap-3">
        <div className=" border  text-white font-bold text-base md:text-xl 2xl:text-2xl font-sofia  border-[#29313D] bg-[#121924] items-center justify-between">
          <div className="flex py-2 px-3 border border-[#29313D] bg-[#121924] items-center gap-3 justify-between ">
            <div className="flex items-center gap-2 ">
              <img src="/images/sports/army.svg" alt="" />
              <h1>United21 Season 41 2025</h1>
            </div>
            <div className="uppercase">live(round 2)</div>
          </div>
          <div className="py-2 px-3 !w-full bg-[#161E2A]">
            <div className="flex mt-2 bg-[#121924] py-1 !w-full font-onest text-xs md:text-sm 2xl:text-base hover:border-[#4D4CFE] duration-300 cursor-pointer hover:bg-[#2B5AFF26]  border-2 pl-5 justify-between  gap-4 md:w-[400px] border-[#29313D] ">
              <div className="flex items-center gap-2">
                <img src="/images/sports/star.svg" alt="" />
                <h1>YOUNG NINJAS</h1>
                <span className="text-[#C9EA0C] ml-1">1</span>
              </div>
              <div className="bg-[#13151A] p-2">3.15</div>
            </div>
            <div className="flex mt-1 !w-full bg-[#121924] py-1 font-onest text-xs md:text-sm 2xl:text-base hover:border-[#4D4CFE] duration-300 cursor-pointer hover:bg-[#2B5AFF26]  border-2 pl-5 justify-between  gap-4 md:w-[400px] border-[#29313D] ">
              <div className="flex items-center gap-2">
                <img src="/images/sports/star.svg" alt="" />
                <h1>YOUNG NINJAS</h1>
                <span className="text-[#C9EA0C] ml-1">1</span>
              </div>
              <div className="bg-[#13151A] p-2">3.15</div>
            </div>
          </div>
        </div>
        <div className=" border  text-white font-bold text-base md:text-xl 2xl:text-2xl font-sofia  border-[#29313D] bg-[#121924] items-center justify-between">
          <div className="flex py-2 px-3 border border-[#29313D] bg-[#121924] items-center gap-3 justify-between ">
            <div className="flex items-center gap-2 ">
              <img src="/images/sports/army.svg" alt="" />
              <h1>United21 Season 41 2025</h1>
            </div>
            <div className="uppercase">live(round 2)</div>
          </div>
          <div className="py-2 px-3 !w-full bg-[#161E2A]">
            <div className="flex mt-2 bg-[#121924] py-1 !w-full font-onest text-xs md:text-sm 2xl:text-base hover:border-[#4D4CFE] duration-300 cursor-pointer hover:bg-[#2B5AFF26]  border-2 pl-5 justify-between  gap-4 md:w-[400px] border-[#29313D] ">
              <div className="flex items-center gap-2">
                <img src="/images/sports/star.svg" alt="" />
                <h1>YOUNG NINJAS</h1>
                <span className="text-[#C9EA0C] ml-1">1</span>
              </div>
              <div className="bg-[#13151A] p-2">3.15</div>
            </div>
            <div className="flex mt-1 !w-full bg-[#121924] py-1 font-onest text-xs md:text-sm 2xl:text-base hover:border-[#4D4CFE] duration-300 cursor-pointer hover:bg-[#2B5AFF26]  border-2 pl-5 justify-between  gap-4 md:w-[400px] border-[#29313D] ">
              <div className="flex items-center gap-2">
                <img src="/images/sports/star.svg" alt="" />
                <h1>YOUNG NINJAS</h1>
                <span className="text-[#C9EA0C] ml-1">1</span>
              </div>
              <div className="bg-[#13151A] p-2">3.15</div>
            </div>
          </div>
        </div>
        <div className=" border  text-white font-bold text-base md:text-xl 2xl:text-2xl font-sofia  border-[#29313D] bg-[#121924] items-center justify-between">
          <div className="flex py-2 px-3 border border-[#29313D] bg-[#121924] items-center gap-3 justify-between ">
            <div className="flex items-center gap-2 ">
              <img src="/images/sports/army.svg" alt="" />
              <h1>United21 Season 41 2025</h1>
            </div>
            <div className="uppercase">live(round 2)</div>
          </div>
          <div className="py-2 px-3 !w-full bg-[#161E2A]">
            <div className="flex mt-2 bg-[#121924] py-1 !w-full font-onest text-xs md:text-sm 2xl:text-base hover:border-[#4D4CFE] duration-300 cursor-pointer hover:bg-[#2B5AFF26]  border-2 pl-5 justify-between  gap-4 md:w-[400px] border-[#29313D] ">
              <div className="flex items-center gap-2">
                <img src="/images/sports/star.svg" alt="" />
                <h1>YOUNG NINJAS</h1>
                <span className="text-[#C9EA0C] ml-1">1</span>
              </div>
              <div className="bg-[#13151A] p-2">3.15</div>
            </div>
            <div className="flex mt-1 !w-full bg-[#121924] py-1 font-onest text-xs md:text-sm 2xl:text-base hover:border-[#4D4CFE] duration-300 cursor-pointer hover:bg-[#2B5AFF26]  border-2 pl-5 justify-between  gap-4 md:w-[400px] border-[#29313D] ">
              <div className="flex items-center gap-2">
                <img src="/images/sports/star.svg" alt="" />
                <h1>YOUNG NINJAS</h1>
                <span className="text-[#C9EA0C] ml-1">1</span>
              </div>
              <div className="bg-[#13151A] p-2">3.15</div>
            </div>
          </div>
        </div>
      </div>
      </div>
  );
};

export default LiveSports;
