<style>

.split-card{
    display:flex;
    gap:var(--gap);
    overflow:hidden;
}
.split-card .text{
    padding:0 36px 36px 36px;
    flex:1 1 50%;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.split-card-media {
    padding-top: 10px;
    flex:0 0 45%;
    min-width:220px;
    position:relative;
    background:#eee;
    display:flex;
    align-items:center;
    justify-content:center;
}
.split-card .media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    min-height:200px;
}
    
    @media (max-width:800px){
    .split-card{flex-direction:column}
    .split-card .media{flex:0 0 auto; min-height:220px}
    }
</style>
{% schema %}
{
  "name": "Satisfaction guarantee",
  "settings": [
    {
      "type": "richtext",
      "id": "content",
      "label": "Content"
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "Image"
    }
  ],
  "presets": [
    {
      "name": "Satisfaction guarantee"
    }
  ]
}
{% endschema %}

<div class="page-width">
  <div class="split-card">
    <div class="text">
      {% if section.settings.heading != blank %}
        <h1>{{ section.settings.heading }}</h1>
      {% endif %}
      {% if section.settings.content != blank %}
        <div class="content">{{ section.settings.content }}</div>
      {% endif %}
      {% if section.settings.button_label != blank %}
        <a class="cta" href="{{ section.settings.button_link }}">{{ section.settings.button_label }}</a>
      {% endif %}
    </div>
    <div class="split-card-media">
      {% if section.settings.image != blank %}
        <img src="{{ section.settings.image | img_url: 'master' }}" alt="{{ section.settings.heading }}">
      {% endif %}
    </div>
  </div>
</div>