<div class="card grid {{ col_start }} bg-gray-500  hover:bg-secondary/90  justify-center items-center 
border-[1px] border-gray-400 px-[clamp(6.25px,0.5vw+5.5px,7.5px)] w-full min:w-40 md:min-w-44 xl:min-w-50 transition-colors duration-300">
  {# --- If Website URL is provided, wrap the logo in an anchor tag --- #}
  {% if website_url %}
    <a class="max-w-[clamp(140px,4.5vw + 100px,320px)] w-fit h-[clamp(60px,5vw+35px,100px)] flex items-center justify-center " href="{{ website_url }}">
      <img class="w-full object-cover" src="{{ sponser_logo }}" alt="{{website_url}}">
    </a>
  {% else %}
    <div class="w-[clamp(140px,4.5vw + 100px,320px)] h-[clamp(60px,5vw+35px,100px)] flex items-center justify-center px-4">
      <img class="w-full object-cover" src="{{ sponser_logo }}" alt="{{website_url}}">
    </div>
  {% endif %}
</div>
