<ul class="grid grid-cols-1 sm:grid-cols-2 gap-8">
  {% for entry in items %}
    <li>
      <a href="{{ entry.url }}" class="block w-full hover:opacity-70">
        {% if entry.mainImage and entry.mainImage.path %}
          <img
            src="{{ entry.mainImage.path|resizeImg(686, 386) }}"
            width="343"
            height="193"
            alt="{{ entry.mainImage.alt }}"
            loading="lazy"
            decoding="async"
            class="object-cover w-full mb-4 overflow-hidden rounded-md shadow-sm aspect-video"
          />
        {% else %}
          <img
            src="/images/default/noimage.gif"
            width="343"
            height="193"
            alt=""
            loading="lazy"
            decoding="async"
            class="object-cover w-full mb-4 overflow-hidden rounded-md shadow-sm aspect-video"
          />
        {% endif %}
        <h3 class="mt-3 text-gray-900 text-base md:text-lg font-bold line-clamp-2">{{ entry.title }}</h3>
        <p class="mt-2 text-sm line-clamp-2">
          {{ entry.summary }}
        </p>
        <div class="flex flex-wrap items-center gap-x-2 gap-y-1 mt-2 text-xs">
          <p class="text-gray-500 text-sm">
            <span class="sr-only">公開日</span><time datetime="{{ entry.datetime|date('Y-m-d') }}">{{
                entry.datetime|date('Y年m月d日')
              }}</time>
          </p>
          {% if entry.isNew %}
            <p class="px-2 py-1 rounded-full bg-gray-50 text-gray-900 text-xs">
              NEW
            </p>
          {% endif %}
        </div>
        {% if entry.category.items %}
          <p class="mt-2 text-gray-500 font-bold text-sm">
            <span class="sr-only">カテゴリー</span>{{ entry.category.items[0].name }}
          </p>
        {% endif %}
      </a>
    </li>
  {% endfor %}
</ul>
