
{# <div class="flex space-x-12 justify-center">
    <img loading="lazy" src="images/zictia_black.png" class="test" alt="Image 1" />
    <img loading="lazy" src="images/vverse_black.png" class="test" alt="Image 2" />
    <img loading="lazy" src="images/social_network_black.png" class="test" alt="Image 3" />
    <img loading="lazy" src="images/vevrse_black.png" class="test" alt="Image 4" />
    <img loading="lazy" src="images/sikana_black.png" class="test" alt="Image 5" />
    <img loading="lazy" src="images/ourworld_black.png" class="test" alt="Image 6" />
    <img loading="lazy" src="images/ict_black.png" class="test" alt="Image 7" />
    <img loading="lazy" src="images/holochain_black.png" class="test" alt="Image 8" />
    <img loading="lazy" src="images/temple_black.png" class="test" alt="Image 9" />
    
  </div> #}
  

  <div class="border-t-2 mb-6 border-gray-200"></div>

  <div
  x-data="{}"
  x-init="$nextTick(() => {
      let ul = $refs.logos;
      ul.insertAdjacentHTML('afterend', ul.outerHTML);
      ul.nextSibling.setAttribute('aria-hidden', 'true');
  })"
  class="w-full inline-flex flex-nowrap overflow-hidden [mask-image:_linear-gradient(to_right,transparent_0,_black_128px,_black_calc(100%-128px),transparent_100%)]"
>

<ul x-ref="logos" class="flex items-center justify-center md:justify-start [&_li]:mx-8 [&_img]:max-w-none animate-infinite-scroll">
    <li>
        <img src="images/zictia_black.png" alt="Facebook" />
    </li>
    <li>
        <img src="images/vverse_black.png" alt="Disney" />
    </li>
    <li>
        <img src="images/social_network_black.png" alt="Airbnb" />
    </li>
    <li>
        <img src="images/vevrse_black.png" alt="Apple" />
    </li>
    <li>
        <img src="images/ict_black.png" alt="Spark" />
    </li>
    <li>
        <img src="images/holochain_black.png" alt="Samsung" />
    </li>
    <li>
        <img src="images/sikana_black.png" alt="Quora" />
    </li>
    <li>
        <img src="images/ourworld_black.png" alt="Sass" />
    </li>
    <li>
        <img src="images/temple_black.png" alt="Sass" />
    </li>
</ul> 
<ul x-ref="logos" class="flex items-center justify-center md:justify-start [&_li]:mx-8 [&_img]:max-w-none animate-infinite-scroll" aria-hidden="true">
    <li>
        <img src="images/zictia_black.png" alt="Facebook" />
    </li>
    <li>
        <img src="images/vverse_black.png" alt="Disney" />
    </li>
    <li>
        <img src="images/social_network_black.png" alt="Airbnb" />
    </li>
    <li>
        <img src="images/vevrse_black.png" alt="Apple" />
    </li>
    <li>
        <img src="images/ict_black.png" alt="Spark" />
    </li>
    <li>
        <img src="images/holochain_black.png" alt="Samsung" />
    </li>
    <li>
        <img src="images/sikana_black.png" alt="Quora" />
    </li>
    <li>
        <img src="images/ourworld_black.png" alt="Sass" />
    </li>
    <li>
        <img src="images/temple_black.png" alt="Sass" />
    </li>
</ul> 

</div>
<div class="border-t-2 mt-6 border-gray-200"></div>


<style>
    ul {
        list-style-type: none;
      }
</style>


