Lookbook

<section class="sl-lookbook" style="padding:clamp(32px,6vw,64px) 1rem;color:inherit;font-family:inherit;">
  <div style="max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(2rem,5vw,4rem);">
    {%- if section.settings.heading != blank -%}
      <header style="text-align:center;">
        {%- if section.settings.eyebrow != blank -%}
          <span style="font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sl-accent,#0a5cff);font-weight:700;">{{ section.settings.eyebrow }}</span>
        {%- endif -%}
        <h2 style="margin:.25rem 0 0;font-size:clamp(1.75rem,4vw,2.75rem);">{{ section.settings.heading }}</h2>
        {%- if section.settings.subheading != blank -%}
          <p style="margin:.5rem auto 0;max-width:640px;opacity:.85;">{{ section.settings.subheading }}</p>
        {%- endif -%}
      </header>
    {%- endif -%}
    {%- for block in section.blocks -%}
      <article style="display:grid;gap:clamp(1rem,4vw,2.5rem);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:center;{% if forloop.index0 | modulo: 2 == 1 %}direction:rtl;{% endif %}" {{ block.shopify_attributes }}>
        <figure style="margin:0;direction:ltr;">
          <img src="{{ block.settings.image | image_url: width: 900 | default: 'https://picsum.photos/seed/' | append: block.id | append: '/900/1100' }}" alt="{{ block.settings.alt | default: block.settings.title }}" loading="lazy" style="width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:.5rem;display:block;" />
        </figure>
        <div style="direction:ltr;display:flex;flex-direction:column;gap:.65rem;">
          {%- if block.settings.chapter != blank -%}
            <span style="font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sl-accent,#0a5cff);font-weight:700;">{{ block.settings.chapter }}</span>
          {%- endif -%}
          <h3 style="margin:0;font-size:clamp(1.35rem,2.5vw,1.85rem);line-height:1.2;">{{ block.settings.title }}</h3>
          {%- if block.settings.body != blank -%}
            <div style="line-height:1.65;opacity:.9;">{{ block.settings.body }}</div>
          {%- endif -%}
          {%- if block.settings.cta_text != blank -%}
            <a href="{{ block.settings.cta_link | default: '#' }}" style="margin-top:.25rem;align-self:flex-start;color:var(--sl-accent,#0a5cff);text-decoration:none;border-bottom:1px solid var(--sl-accent,#0a5cff);font-weight:600;">{{ block.settings.cta_text }} &rarr;</a>
          {%- endif -%}
        </div>
      </article>
    {%- endfor -%}
  </div>
</section>
{% schema %}
{
  "name": "Lookbook",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Editorial" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "The lookbook" },
    { "type": "text", "id": "subheading", "label": "Subheading", "default": "A guided tour through our newest drops." }
  ],
  "blocks": [
    {
      "type": "chapter",
      "name": "Chapter",
      "settings": [
        { "type": "image_picker", "id": "image", "label": "Image" },
        { "type": "text", "id": "alt", "label": "Alt text", "default": "Lookbook image" },
        { "type": "text", "id": "chapter", "label": "Chapter label", "default": "Chapter 01" },
        { "type": "text", "id": "title", "label": "Title", "default": "Street to studio" },
        { "type": "richtext", "id": "body", "label": "Body", "default": "<p>Relaxed tailoring meets lived-in denim for a look that moves from work to weekend.</p>" },
        { "type": "text", "id": "cta_text", "label": "Link text", "default": "Shop the look" },
        { "type": "url", "id": "cta_link", "label": "Link URL" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Lookbook",
      "blocks": [
        { "type": "chapter" },
        { "type": "chapter" },
        { "type": "chapter" }
      ]
    }
  ]
}
{% endschema %}