<section data-component-type="Hero" class="w-full !pt-0 py-2 px-[24px] lg:py-[60px] lg:px-10 md:py-12 md:px-6 sm:py-8 sm:px-4" data-component-slug="clothing-template-hero">
  <div class="relative w-full h-[1200px] lg:h-[1110px] md:h-[980px] sm:h-screen rounded-3xl md:rounded-[20px] sm:rounded-2xl overflow-hidden bg-cover bg-center bg-no-repeat" style="background-image: url('{{hero_bg}}');" data-node="hero_bg" data-node-type="file" data-node-label="Hero Background" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766744595/seltrix/templates/clothing-template/Hero%20banner.webp">
    <div class="max-w-[900px] lg:max-w-[760px] w-full mx-auto mt-[120px] md:mt-[240px] lg:mt-[200px] md:mt-[180px] sm:mt-[140px] text-center px-2 md:px-4 sm:px-3">
      <h1 class="font-black italic text-[45px] lg:text-[48px] md:text-[36px] sm:text-[28px] xs:text-[24px] leading-none tracking-normal text-[#010609] mx-auto mb-6 max-w-[850px] text-center" data-node="hero_title" data-node-type="text" data-node-label="Hero Title" data-node-default="Fit Check? You're About to Break the Internet">
        {{hero_title}}
      </h1>

      <p class="font-normal text-[18px] lg:text-[18px] md:text-base sm:text-sm xs:text-[13px] leading-none md:leading-[120%] text-[#010609] mb-10 lg:mb-8 sm:mb-7" data-node="hero_desc" data-node-type="text" data-node-label="Hero Description" data-node-default="Drip so clean, even your mirror's jealous. Cop the fit before it's gone">
        {{hero_desc}}
      </p>

      <div class="flex flex-col lg:flex-row justify-center gap-4 md:gap-3 flex-wrap sm:flex-col items-center">
        <a href="{{hero_primary_btn}}" class="w-[182px] h-16 lg:h-[60px] sm:h-14 w-fit px-6 py-[18px] rounded-xl bg-[#010609] text-white text-[20px] lg:text-[18px] sm:text-sm no-underline flex items-center justify-center" data-node="hero_primary_btn" data-node-type="page_links" data-node-label="Primary Button" data-node-default="/shop">
          <span data-node="hero_primary_btn_text" data-node-type="text" data-node-default="Shop Now">
            {{hero_primary_btn_text}}
          </span>
        </a>

        <a href="{{hero_secondary_btn}}" class="w-[330px] h-16 lg:h-[60px] sm:h-14 w-fit px-6 py-[18px] rounded-xl border border-black bg-transparent text-[#010609] text-[20px] lg:text-[18px] sm:text-sm no-underline flex items-center justify-center" data-node="hero_secondary_btn" data-node-type="page_links" data-node-label="Secondary Button" data-node-default="/discounts">
          <span data-node="hero_secondary_btn_text" data-node-type="text" data-node-default="Take me to Discounts">
            {{hero_secondary_btn_text}}
          </span>
        </a>
      </div>
    </div>
  </div>
</section>