<section data-component-type="Content" class="w-full py-20 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-category-showcase">
  

  <div class="flex justify-between items-start md:mb-12 mb-6 gap-10 w-full md:flex-col md:gap-6">
    <div class="w-full">
      <h2 class="title-stroke text-[45px] lg:text-[38px] md:text-[32px] sm:text-[26px] font-black leading-none text-black mb-4" data-node="category_title" data-node-type="text" data-node-default="Wear It. Flex It. Repeat.">
        {{category_title}}
      </h2>

      <span class="flex w-full justify-center items-start sm:justify-between gap-6 flex-col md:flex-row sm:gap-4">
        <p class="text-[12px] md:text-base sm:text-sm text-black max-w-[562px] md:max-w-[462px] sm:max-w-full leading-[110%]" data-node="category_desc" data-node-type="text" data-node-default="Step into your main-character era. Our drops are built for the ones who don't just follow trends — they start them.">
          {{category_desc}}
        </p>

        <div class="flex gap-2 md:gap-3 shrink-0 self-end md:self-center">
          <button class="w-[35px] md:w-[45px] sm:w-10 bg-transparent border-none cursor-pointer p-0" id="catPrev">
            <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1766994390/seltrix/templates/clothing-template/Left%20arrow.svg" alt="Previous" class="w-full h-full block">
          </button>
          <button class="w-[35px] md:w-[45px] sm:w-10 bg-transparent border-none cursor-pointer p-0" id="catNext">
            <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1766994439/seltrix/templates/clothing-template/right%20arrow.svg" alt="Next" class="w-full h-full block">
          </button>
        </div>
      </span>
    </div>
  </div>

  <div class="w-full overflow-hidden">
    <div class="flex gap-6 slider-transition" id="categorySlider">
      <div class="min-w-[calc((100%-48px)/1)] sm:min-w-[calc((100%-48px)/2)] md:min-w-[calc((100%-48px)/2)] lg:min-w-[calc((100%-48px)/4)] 2xl:min-w-[calc((100%-72px)/4)]">
        <div class="w-full aspect-[4/5] rounded-2xl overflow-hidden mb-4">
          <img src="{{card_1_image}}" data-node="card_1_image" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766744596/seltrix/templates/clothing-template/Hoodies.webp" class="w-full h-full object-cover block">
        </div>
        <h4 class="text-[15px] md:text-[17px] text-black mb-1.5 font-bold" data-node="card_1_title" data-node-type="text" data-node-default="Hoodies">
          {{card_1_title}}
        </h4>
        <p class="text-[12px] md:text-sm md:leading-[130%] text-black leading-none" data-node="card_1_desc" data-node-type="text" data-node-default="Throw One on and Let the Fit Talk">
          {{card_1_desc}}
        </p>
      </div>

      <div class="min-w-[calc((100%-48px)/1)] sm:min-w-[calc((100%-48px)/2)] md:min-w-[calc((100%-48px)/2)] lg:min-w-[calc((100%-48px)/4)] 2xl:min-w-[calc((100%-72px)/4)]">
        <div class="w-full aspect-[4/5] rounded-2xl overflow-hidden mb-4">
          <img src="{{card_2_image}}" data-node="card_2_image" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766744637/seltrix/templates/clothing-template/Sweatshirts.webp" class="w-full h-full object-cover block">
        </div>
        <h4 class="text-[15px] md:text-[17px] text-black mb-1.5 font-bold" data-node="card_2_title" data-node-type="text" data-node-default="Sweatshirts">
          {{card_2_title}}
        </h4>
        <p class="text-[12px] md:text-sm md:leading-[130%] text-black leading-none" data-node="card_2_desc" data-node-type="text" data-node-default="Sweats with a Statement">
          {{card_2_desc}}
        </p>
      </div>

      <div class="min-w-[calc((100%-48px)/1)] sm:min-w-[calc((100%-48px)/2)] md:min-w-[calc((100%-48px)/2)] lg:min-w-[calc((100%-48px)/4)] 2xl:min-w-[calc((100%-72px)/4)]">
        <div class="w-full aspect-[4/5] rounded-2xl overflow-hidden mb-4">
          <img src="{{card_3_image}}" data-node="card_3_image" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766744638/seltrix/templates/clothing-template/Tees.webp" class="w-full h-full object-cover block">
        </div>
        <h4 class="text-[15px] md:text-[17px] text-black mb-1.5 font-bold" data-node="card_3_title" data-node-type="text" data-node-default="Tees">
          {{card_3_title}}
        </h4>
        <p class="text-[12px] md:text-sm md:leading-[130%] text-black leading-none" data-node="card_3_desc" data-node-type="text" data-node-default="Oversize. Over Everything">
          {{card_3_desc}}
        </p>
      </div>

      <div class="min-w-[calc((100%-48px)/1)] sm:min-w-[calc((100%-48px)/2)] md:min-w-[calc((100%-48px)/2)] lg:min-w-[calc((100%-48px)/4)] 2xl:min-w-[calc((100%-72px)/4)]">
        <div class="w-full aspect-[4/5] rounded-2xl overflow-hidden mb-4">
          <img src="{{card_4_image}}" data-node="card_4_image" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766744572/seltrix/templates/clothing-template/Bottoms.webp" class="w-full h-full object-cover block">
        </div>
        <h4 class="text-[15px] md:text-[17px] text-black mb-1.5 font-bold" data-node="card_4_title" data-node-type="text" data-node-default="Bottoms">
          {{card_4_title}}
        </h4>
        <p class="text-[12px] md:text-sm md:leading-[130%] text-black leading-none" data-node="card_4_desc" data-node-type="text" data-node-default="Legs Deserve Love Too">
          {{card_4_desc}}
        </p>
      </div>

      <div class="min-w-[calc((100%-48px)/1)] sm:min-w-[calc((100%-48px)/2)] md:min-w-[calc((100%-48px)/2)] lg:min-w-[calc((100%-48px)/4)] 2xl:min-w-[calc((100%-72px)/4)]">
        <div class="w-full aspect-[4/5] rounded-2xl overflow-hidden mb-4">
          <img src="{{card_5_image}}" data-node="card_5_image" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766744596/seltrix/templates/clothing-template/Hoodies.webp" class="w-full h-full object-cover block">
        </div>
        <h4 class="text-[15px] md:text-[17px] text-black mb-1.5 font-bold" data-node="card_5_title" data-node-type="text" data-node-default="Hoodies">
          {{card_5_title}}
        </h4>
        <p class="text-[12px] md:text-sm md:leading-[130%] text-black leading-none" data-node="card_5_desc" data-node-type="text" data-node-default="Throw One on and Let the Fit Talk">
          {{card_5_desc}}
        </p>
      </div>

      <div class="min-w-[calc((100%-48px)/1)] sm:min-w-[calc((100%-48px)/2)] md:min-w-[calc((100%-48px)/2)] lg:min-w-[calc((100%-48px)/4)] 2xl:min-w-[calc((100%-72px)/4)]">
        <div class="w-full aspect-[4/5] rounded-2xl overflow-hidden mb-4">
          <img src="{{card_6_image}}" data-node="card_6_image" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766744637/seltrix/templates/clothing-template/Sweatshirts.webp" class="w-full h-full object-cover block">
        </div>
        <h4 class="text-[15px] md:text-[17px] text-black mb-1.5 font-bold" data-node="card_6_title" data-node-type="text" data-node-default="Sweatshirts">
          {{card_6_title}}
        </h4>
        <p class="text-[12px] md:text-sm md:leading-[130%] text-black leading-none" data-node="card_6_desc" data-node-type="text" data-node-default="Sweats with a Statement">
          {{card_6_desc}}
        </p>
      </div>
    </div>
  </div>

  
</section>