Directory test 1

{% comment %} Custom Directory Page Template {% endcomment %}
<h1>Our Directory</h1>
<p>Explore our collections below.</p>

<div class="directory-grid">
  {% for collection in collections %}
    <div class="directory-item">
      <a href="{{ collection.url }}">
        <img src="{{ collection.image | image_url: width: 400 }}" alt="{{ collection.title }}" />
        <h2>{{ collection.title }}</h2>
      </a>
      <p>{{ collection.description | truncate: 100 }}</p>
    </div>
  {% endfor %}
</div>

<style>
  .directory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
  }
  
  .directory-item {
    border: 1px solid #e1e1e1;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    background-color: #fff;
    transition: transform 0.3s;
  }

  .directory-item:hover {
    transform: translateY(-5px);
  }

  img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
  }

  h2 {
    font-size: 1.2em;
    margin-top: 10px;
  }

  p {
    color: #666;
  }
</style>