Image With Text

<section class="sl-img-text" style="padding:clamp(32px,6vw,64px) 1rem;color:inherit;font-family:inherit;">
  <div style="max-width:1080px;margin:0 auto;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:center;">
    <img src="{{ section.settings.image | default: 'https://picsum.photos/seed/imgtext/800/600' }}" alt="{{ section.settings.heading }}" style="width:100%;height:auto;border-radius:.5rem;" />
    <div>
      <h2 style="margin:0 0 1rem;font-size:clamp(1.5rem,3vw,2rem);">{{ section.settings.heading }}</h2>
      <div style="opacity:.85;line-height:1.6;">{{ section.settings.body }}</div>
      {%- if section.settings.cta_text != blank -%}
        <a href="{{ section.settings.cta_link }}" style="display:inline-block;margin-top:1.25rem;padding:.6rem 1.2rem;border:1px solid currentColor;border-radius:.25rem;text-decoration:none;color:inherit;">{{ section.settings.cta_text }}</a>
      {%- endif -%}
    </div>
  </div>
</section>
{% schema %}
{
  "name": "Image With Text",
  "settings": [
    { "type": "image_picker", "id": "image", "label": "Image" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Crafted with care" },
    { "type": "richtext", "id": "body", "label": "Body", "default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post.</p>" },
    { "type": "text", "id": "cta_text", "label": "Button text", "default": "Learn more" },
    { "type": "url", "id": "cta_link", "label": "Button link" }
  ],
  "presets": [{ "name": "Image With Text" }]
}
{% endschema %}