Collection List With Images

<section class="sl-collection-list" style="padding:clamp(32px,6vw,64px) 1rem;color:inherit;font-family:inherit;">
  <div style="max-width:1200px;margin:0 auto;">
    <h2 style="margin:0 0 1.5rem;font-size:clamp(1.5rem,3vw,2rem);text-align:center;">{{ section.settings.heading }}</h2>
    <div style="display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));">
      {%- for block in section.blocks -%}
        {%- assign coll = collections[block.settings.collection] -%}
        <article style="position:relative;border-radius:.5rem;overflow:hidden;aspect-ratio:4/5;" {{ block.shopify_attributes }}>
          <a href="{{ coll.url | default: '#' }}" style="display:block;height:100%;color:inherit;text-decoration:none;">
            <img src="{{ block.settings.override_image | default: coll.image | image_url: width: 600 | default: 'https://picsum.photos/seed/' | append: block.id | append: '/600/750' }}" alt="{{ block.settings.alt | default: coll.title | default: 'Collection image' }}" loading="lazy" style="width:100%;height:100%;object-fit:cover;display:block;" />
            <div style="position:absolute;inset:auto 0 0 0;padding:1rem;background:linear-gradient(to top,rgba(0,0,0,.7),transparent);color:#fff;">
              <h3 style="margin:0 0 .5rem;font-size:1.15rem;">{{ coll.title | default: block.settings.fallback_title | default: 'Collection' }}</h3>
              <span style="display:inline-block;padding:.35rem .75rem;background:var(--sl-accent,#0a5cff);color:#fff;border-radius:.25rem;font-size:.85rem;">{{ section.settings.cta_text | default: 'Shop now' }}</span>
            </div>
          </a>
        </article>
      {%- endfor -%}
    </div>
  </div>
</section>
{% schema %}
{
  "name": "Collection List With Images",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Shop by collection" },
    { "type": "text", "id": "cta_text", "label": "CTA text", "default": "Shop now" }
  ],
  "blocks": [
    {
      "type": "tile",
      "name": "Collection tile",
      "settings": [
        { "type": "collection", "id": "collection", "label": "Collection" },
        { "type": "image_picker", "id": "override_image", "label": "Override image" },
        { "type": "text", "id": "alt", "label": "Alt text", "default": "Collection image" },
        { "type": "text", "id": "fallback_title", "label": "Fallback title", "default": "Collection" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Collection List With Images",
      "blocks": [
        { "type": "tile" },
        { "type": "tile" },
        { "type": "tile" },
        { "type": "tile" }
      ]
    }
  ]
}
{% endschema %}