<div
  class="view-content view-snap hide-scrollbar-x hg:grid hg:snap-x hg:snap-mandatory hg:grid-cols-[272px_248px_272px] hg:gap-6 hg:overflow-x-auto hg:sm:container hg:sm:mx-auto hg:sm:snap-none hg:sm:grid-cols-3 hg:sm:overflow-x-visible hg:sm:px-6 hg:lg:gap-8"
>
  {% if storybook.items %}
    {% for item in storybook.items %}
      <div class="view-item hg:rounded-lg hg:bg-white hg:p-6 hg:shadow-md">
        <h3 class="hg:mb-2 hg:text-lg hg:font-semibold">
          <a href="{{ item.url }}" class="hover:hg:text-blue-800 hg:text-blue-600">{{ item.title }}</a>
        </h3>
        {% if item.summary %}
          <p class="hg:text-sm hg:text-gray-600">
            {{ item.summary }}
          </p>
        {% endif %}
      </div>
    {% endfor %}
  {% else %}
    {{ rows }}
  {% endif %}
</div>
