Icon Feature Grid

<section class="sl-icon-features" style="padding:clamp(32px,6vw,64px) 1rem;color:inherit;font-family:inherit;">
  <div style="max-width:1200px;margin:0 auto;">
    <header style="text-align:center;margin:0 0 2rem;">
      {%- if section.settings.eyebrow != blank -%}
        <span style="font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--sl-accent,#0a5cff);font-weight:700;">{{ section.settings.eyebrow }}</span>
      {%- endif -%}
      {%- if section.settings.heading != blank -%}
        <h2 style="margin:.25rem 0 .5rem;font-size:clamp(1.5rem,3vw,2.25rem);line-height:1.2;">{{ section.settings.heading }}</h2>
      {%- endif -%}
      {%- if section.settings.subheading != blank -%}
        <p style="margin:0 auto;max-width:640px;opacity:.8;line-height:1.55;">{{ section.settings.subheading }}</p>
      {%- endif -%}
    </header>
    <div style="display:grid;gap:clamp(.85rem,2vw,1.5rem);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));">
      {%- for block in section.blocks -%}
        <article style="text-align:center;padding:clamp(1.1rem,2vw,1.5rem);border:1px solid currentColor;border-radius:.6rem;display:flex;flex-direction:column;align-items:center;gap:.6rem;transition:transform .2s,box-shadow .2s;" {{ block.shopify_attributes }}>
          <span aria-hidden="true" style="display:inline-flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:.75rem;background:var(--sl-accent,#0a5cff);color:#fff;font-size:1.45rem;line-height:1;">{{ block.settings.icon | default: '★' }}</span>
          <h3 style="margin:0;font-size:1.05rem;line-height:1.3;font-weight:700;">{{ block.settings.heading }}</h3>
          <p style="margin:0;opacity:.85;line-height:1.55;font-size:.92rem;">{{ block.settings.description }}</p>
          {%- if block.settings.link_text != blank -%}
            <a href="{{ block.settings.link_url | default: '#' }}" style="margin-top:.25rem;color:var(--sl-accent,#0a5cff);text-decoration:none;font-weight:600;font-size:.85rem;border-bottom:1px solid var(--sl-accent,#0a5cff);">{{ block.settings.link_text }} &rarr;</a>
          {%- endif -%}
        </article>
      {%- endfor -%}
    </div>
  </div>
</section>
{% schema %}
{
  "name": "Icon Feature Grid",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "The shop difference" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Why shop with us" },
    { "type": "textarea", "id": "subheading", "label": "Subheading", "default": "Four reasons customers keep coming back." }
  ],
  "blocks": [
    {
      "type": "feature",
      "name": "Feature",
      "settings": [
        { "type": "text", "id": "icon", "label": "Icon (emoji or single character)", "default": "★" },
        { "type": "text", "id": "heading", "label": "Heading", "default": "Fast shipping" },
        { "type": "textarea", "id": "description", "label": "Description", "default": "Orders ship within 2 business days, worldwide." },
        { "type": "text", "id": "link_text", "label": "Link text" },
        { "type": "url", "id": "link_url", "label": "Link URL" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Icon Feature Grid",
      "blocks": [
        { "type": "feature", "settings": { "icon": "🚚", "heading": "Fast shipping", "description": "Orders ship within 2 business days — free over $60." } },
        { "type": "feature", "settings": { "icon": "♻", "heading": "Recycled fabrics", "description": "85% of our materials come from recycled or regenerative sources." } },
        { "type": "feature", "settings": { "icon": "🛡", "heading": "2-year warranty", "description": "If a seam fails, we will repair or replace it — no receipt needed." } },
        { "type": "feature", "settings": { "icon": "💬", "heading": "Human support", "description": "Real humans answer every email, usually within 2 hours." } }
      ]
    }
  ]
}
{% endschema %}