Featured Collection Grid

<section class="sl-featured-collection" style="padding:clamp(32px,6vw,64px) 1rem;color:inherit;font-family:inherit;">
  <div style="max-width:1200px;margin:0 auto;">
    <header style="display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:baseline;margin:0 0 1.5rem;">
      <h2 style="margin:0;font-size:clamp(1.5rem,3vw,2rem);">{{ section.settings.heading }}</h2>
      {%- if section.settings.cta_text != blank -%}
        <a href="{{ section.settings.cta_link }}" style="color:var(--sl-accent,#0a5cff);text-decoration:none;border-bottom:1px solid var(--sl-accent,#0a5cff);font-size:.9rem;">{{ section.settings.cta_text }} &rarr;</a>
      {%- endif -%}
    </header>
    {%- assign coll = collections[section.settings.collection] -%}
    {%- assign per_row = section.settings.products_per_row | default: 3 -%}
    {%- assign min_size = 240 -%}
    <div style="display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax({{ min_size }}px,1fr));">
      {%- if coll.products.size > 0 -%}
        {%- for product in coll.products limit: per_row | times: 2 -%}
          <article style="border:1px solid currentColor;border-radius:.5rem;overflow:hidden;display:flex;flex-direction:column;">
            <a href="{{ product.url }}" style="color:inherit;text-decoration:none;">
              <img src="{{ product.featured_image | image_url: width: 600 }}" alt="{{ product.featured_image.alt | default: product.title }}" loading="lazy" style="width:100%;aspect-ratio:1/1;object-fit:cover;display:block;" />
              <div style="padding:.85rem;">
                <h3 style="margin:0 0 .35rem;font-size:1rem;">{{ product.title }}</h3>
                <p style="margin:0;color:var(--sl-accent,#0a5cff);font-weight:600;">{{ product.price | money }}</p>
              </div>
            </a>
          </article>
        {%- endfor -%}
      {%- else -%}
        {%- for i in (1..6) -%}
          <article style="border:1px solid currentColor;border-radius:.5rem;overflow:hidden;">
            <img src="https://picsum.photos/seed/fc{{ i }}/600/600" alt="{{ section.settings.placeholder_alt | default: 'Product placeholder' }}" loading="lazy" style="width:100%;aspect-ratio:1/1;object-fit:cover;display:block;" />
            <div style="padding:.85rem;">
              <h3 style="margin:0 0 .35rem;font-size:1rem;">Product {{ i }}</h3>
              <p style="margin:0;color:var(--sl-accent,#0a5cff);font-weight:600;">$29.00</p>
            </div>
          </article>
        {%- endfor -%}
      {%- endif -%}
    </div>
  </div>
</section>
{% schema %}
{
  "name": "Featured Collection Grid",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Featured products" },
    { "type": "collection", "id": "collection", "label": "Collection" },
    { "type": "range", "id": "products_per_row", "label": "Products per row", "min": 2, "max": 4, "step": 1, "default": 3 },
    { "type": "text", "id": "cta_text", "label": "CTA text", "default": "View all" },
    { "type": "url", "id": "cta_link", "label": "CTA link" },
    { "type": "text", "id": "placeholder_alt", "label": "Alt text (placeholder)", "default": "Product placeholder" }
  ],
  "presets": [{ "name": "Featured Collection Grid" }]
}
{% endschema %}