Mega Menu Teaser

<aside class="sl-mega-teaser" style="padding:clamp(16px,2.5vw,24px);color:inherit;font-family:inherit;border:1px solid currentColor;border-radius:.5rem;max-width:420px;">
  <div style="display:grid;gap:.9rem;grid-template-columns:minmax(120px,40%) 1fr;align-items:center;">
    <figure style="margin:0;">
      <img src="{{ section.settings.image | image_url: width: 400 | default: 'https://picsum.photos/seed/mega-teaser/400/400' }}" alt="{{ section.settings.image_alt | default: section.settings.heading }}" loading="lazy" style="width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:.375rem;display:block;" />
    </figure>
    <div style="display:flex;flex-direction:column;gap:.4rem;">
      {%- if section.settings.eyebrow != blank -%}
        <span style="font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sl-accent,#0a5cff);font-weight:700;">{{ section.settings.eyebrow }}</span>
      {%- endif -%}
      <h2 style="margin:0;font-size:clamp(1.05rem,1.75vw,1.25rem);line-height:1.2;">{{ section.settings.heading }}</h2>
      {%- if section.settings.body != blank -%}
        <p style="margin:0;font-size:.9rem;opacity:.85;line-height:1.45;">{{ section.settings.body }}</p>
      {%- endif -%}
      {%- if section.settings.cta_text != blank -%}
        <a href="{{ section.settings.cta_link | default: '#' }}" style="margin-top:.25rem;align-self:flex-start;color:var(--sl-accent,#0a5cff);text-decoration:none;font-weight:600;font-size:.9rem;border-bottom:1px solid var(--sl-accent,#0a5cff);">{{ section.settings.cta_text }} &rarr;</a>
      {%- endif -%}
    </div>
  </div>
</aside>
{% schema %}
{
  "name": "Mega Menu Teaser",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Just in" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Spring collection" },
    { "type": "textarea", "id": "body", "label": "Body", "default": "Lightweight layers for warmer days ahead." },
    { "type": "image_picker", "id": "image", "label": "Image" },
    { "type": "text", "id": "image_alt", "label": "Image alt text", "default": "Menu teaser image" },
    { "type": "text", "id": "cta_text", "label": "Link text", "default": "Shop the collection" },
    { "type": "url", "id": "cta_link", "label": "Link URL" }
  ],
  "presets": [{ "name": "Mega Menu Teaser" }]
}
{% endschema %}