{% if articles %}
<div class="grid-3">
  {% for article in articles %}
  <a href="{{ article.url_path }}" class="card" style="text-decoration: none; display: block;">
    <h3 class="text-base font-semibold text-navy mb-1">{{ article.title }}</h3>
    {% if article.meta_description %}
    <p class="text-sm text-slate mb-3" style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">{{ article.meta_description }}</p>
    {% endif %}
    <div class="flex items-center gap-2">
      {% if article.country %}
      <span class="badge">{{ article.country | country_name(lang) }}</span>
      {% endif %}
      {% if article.region %}
      <span class="text-xs text-slate">{{ article.region }}</span>
      {% endif %}
      {% if article.published_at %}
      <span class="text-xs text-slate ml-auto mono">{{ article.published_at[:10] }}</span>
      {% endif %}
    </div>
  </a>
  {% endfor %}
</div>
{% else %}
<div class="card text-center">
  <p class="text-slate text-sm">{{ t.mkt_no_results }}</p>
</div>
{% endif %}
