Instagram Feed Grid

<section class="sl-ig-feed" 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:.75rem;justify-content:space-between;align-items:baseline;margin:0 0 1.25rem;">
      <h2 style="margin:0;font-size:clamp(1.5rem,3vw,2rem);">{{ section.settings.heading }}</h2>
      {%- if section.settings.profile_url != blank -%}
        <a href="{{ section.settings.profile_url }}" rel="noopener" target="_blank" style="color:var(--sl-accent,#0a5cff);text-decoration:none;font-size:.9rem;border-bottom:1px solid var(--sl-accent,#0a5cff);">{{ section.settings.handle | default: '@yourshop' }}</a>
      {%- endif -%}
    </header>
    <div style="display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));">
      {%- for block in section.blocks -%}
        <a href="{{ block.settings.link | default: section.settings.profile_url | default: '#' }}" rel="noopener" target="_blank" style="position:relative;display:block;aspect-ratio:1/1;overflow:hidden;border-radius:.25rem;" {{ block.shopify_attributes }}>
          <img src="{{ block.settings.image | default: 'https://picsum.photos/seed/' | append: block.id | append: '/400/400' }}" alt="{{ block.settings.alt | default: 'Instagram post' }}" loading="lazy" style="width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s;" />
          <span class="sl-ig-overlay" style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--sl-accent,#0a5cff);color:#fff;font-size:1.5rem;opacity:0;transition:opacity .2s;" onmouseover="this.style.opacity='.85'" onmouseout="this.style.opacity='0'">&#9825;</span>
        </a>
      {%- endfor -%}
    </div>
  </div>
</section>
{% schema %}
{
  "name": "Instagram Feed Grid",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Follow us on Instagram" },
    { "type": "text", "id": "handle", "label": "Handle", "default": "@yourshop" },
    { "type": "url", "id": "profile_url", "label": "Profile URL" }
  ],
  "blocks": [
    {
      "type": "post",
      "name": "Post",
      "settings": [
        { "type": "image_picker", "id": "image", "label": "Image" },
        { "type": "text", "id": "alt", "label": "Alt text", "default": "Instagram post" },
        { "type": "url", "id": "link", "label": "Link (optional)" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Instagram Feed Grid",
      "blocks": [
        { "type": "post" },
        { "type": "post" },
        { "type": "post" },
        { "type": "post" },
        { "type": "post" },
        { "type": "post" }
      ]
    }
  ]
}
{% endschema %}