<section class="relative w-full py-4 md:py-8 bg-black" data-component-type="Content">
  <style>
    @keyframes scrollLogos {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-50%);
      }
    }
  </style>

  <!-- GRADIENT LAYERS -->
  <div
    class="absolute top-0 left-0 w-20 sm:w-[80px] md:w-[260px] h-full z-20 pointer-events-none bg-gradient-to-r from-black via-black/35 to-transparent"
  ></div>
  <div
    class="absolute top-0 right-0 w-20 sm:w-[80px] md:w-[260px] h-full z-20 pointer-events-none bg-gradient-to-l from-black via-black/35 to-transparent"
  ></div>

  <!-- FULL WIDTH TRACK -->
  <div class="w-full overflow-hidden flex justify-center">
    <div
      class="flex items-center gap-6 sm:gap-8 md:gap-16 animate-[scrollLogos_15s_linear_infinite]"
      style="min-width: max-content"
    >
      <!-- LOGO 1 -->
      <img
        src="{{logo_file_1}}"
        class="h-7 sm:h-8 md:h-12 opacity-75 md:opacity-85 hover:opacity-100 transition"
        data-node="logo_file_1"
        data-node-type="file"
        data-node-label="Logo 1"
        data-node-default="./assets/Logo (1).png"
      />

      <!-- LOGO 2 -->
      <img
        src="{{logo_file_2}}"
        class="h-7 sm:h-8 md:h-12 opacity-75 md:opacity-85 hover:opacity-100 transition"
        data-node="logo_file_2"
        data-node-type="file"
        data-node-label="Logo 2"
        data-node-default="./assets/Logo (2).png"
      />

      <!-- LOGO 3 -->
      <img
        src="{{logo_file_3}}"
        class="h-7 sm:h-8 md:h-12 opacity-75 md:opacity-85 hover:opacity-100 transition"
        data-node="logo_file_3"
        data-node-type="file"
        data-node-label="Logo 3"
        data-node-default="./assets/Logo (3).png"
      />

      <!-- LOGO 4 -->
      <img
        src="{{logo_file_4}}"
        class="h-7 sm:h-8 md:h-12 opacity-75 md:opacity-85 hover:opacity-100 transition"
        data-node="logo_file_4"
        data-node-type="file"
        data-node-label="Logo 4"
        data-node-default="./assets/Logo (4).png"
      />

      <!-- LOGO 5 -->
      <img
        src="{{logo_file_5}}"
        class="h-7 sm:h-8 md:h-12 opacity-75 md:opacity-85 hover:opacity-100 transition"
        data-node="logo_file_5"
        data-node-type="file"
        data-node-label="Logo 5"
        data-node-default="./assets/Logo (5).png"
      />
    </div>
  </div>
</section>
