Masonry Image Grid

<section class="sl-masonry" style="padding:clamp(32px,5vw,56px) 1rem;color:inherit;font-family:inherit;">
  <div style="max-width:1200px;margin:0 auto;">
    {%- if section.settings.heading != blank -%}
      <h2 style="margin:0 0 1.25rem;font-size:clamp(1.5rem,3vw,2rem);text-align:center;">{{ section.settings.heading }}</h2>
    {%- endif -%}
    <div style="column-count:1;column-gap:.75rem;">
      <style>
        @media (min-width: 480px) { .sl-masonry-inner { column-count: 2; } }
        @media (min-width: 900px) { .sl-masonry-inner { column-count: 3; } }
        @media (min-width: 1200px) { .sl-masonry-inner { column-count: {{ section.settings.columns | default: 4 }}; } }
      </style>
      <div class="sl-masonry-inner" style="column-gap:.75rem;">
        {%- for block in section.blocks -%}
          <figure style="margin:0 0 .75rem;break-inside:avoid;border-radius:.375rem;overflow:hidden;" {{ block.shopify_attributes }}>
            {%- if block.settings.link != blank -%}
              <a href="{{ block.settings.link }}" style="display:block;">
            {%- endif -%}
            <img src="{{ block.settings.image | image_url: width: 800 | default: 'https://picsum.photos/seed/' | append: block.id | append: '/600/' | append: forloop.index0 | plus: 400 }}" alt="{{ block.settings.alt | default: 'Gallery image' }}" loading="lazy" style="width:100%;height:auto;display:block;" />
            {%- if block.settings.caption != blank -%}
              <figcaption style="margin:.4rem .2rem 0;font-size:.8rem;opacity:.75;">{{ block.settings.caption }}</figcaption>
            {%- endif -%}
            {%- if block.settings.link != blank -%}
              </a>
            {%- endif -%}
          </figure>
        {%- endfor -%}
      </div>
    </div>
  </div>
</section>
{% schema %}
{
  "name": "Masonry Image Grid",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Gallery" },
    { "type": "range", "id": "columns", "label": "Columns (desktop)", "min": 2, "max": 5, "step": 1, "default": 4 }
  ],
  "blocks": [
    {
      "type": "image",
      "name": "Image",
      "settings": [
        { "type": "image_picker", "id": "image", "label": "Image" },
        { "type": "text", "id": "alt", "label": "Alt text", "default": "Gallery image" },
        { "type": "text", "id": "caption", "label": "Caption" },
        { "type": "url", "id": "link", "label": "Link (optional)" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Masonry Image Grid",
      "blocks": [
        { "type": "image" },
        { "type": "image" },
        { "type": "image" },
        { "type": "image" },
        { "type": "image" },
        { "type": "image" }
      ]
    }
  ]
}
{% endschema %}