<div class="page-width">
  <div class="side-by-side-image-section">
    {% for block in section.blocks %}
      <div class="side-by-side-image-column">
        {% if block.settings.image_1 %}
          <a href="{{ block.settings.image_1_link }}">
            <div class="side-by-side-image" style="background-image: url('{{ block.settings.image_1 | image_url: width: 600 }}');"></div>
          </a>
        {% endif %}
      </div>
      <div class="side-by-side-image-column">
        {% if block.settings.image_2 %}
          <a href="{{ block.settings.image_2_url }}">
            <div class="side-by-side-image" style="background-image: url('{{ block.settings.image_2 | image_url: width: 600 }}');"></div>
          </a>
        {% endif %}
      </div>
    {% endfor %}
  </div>
</div>

<style>
.side-by-side-image-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 50px;
  margin-top: 50px;
}
.side-by-side-image-column {
  flex: 1;
}
.side-by-side-image {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 450px;
  display: block !important;
}
</style>

{% schema %}
{
  "name": "Side By Side Image",
  "settings": [],
  "blocks": [
    {
      "type": "Image",
      "name": "Image Pair",
      "settings": [
        {
          "type": "image_picker",
          "id": "image_1",
          "label": "Image 1"
        },
        {
          "type": "url",
          "id": "image_1_link",
          "label": "Image 1 Link"
        },
        {
          "type": "image_picker",
          "id": "image_2",
          "label": "Image 2"
        },
        {
          "type": "url",
          "id": "image_2_url",
          "label": "Image 2 Link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Side By Side Image",
      "category": "Custom"
    }
  ]
}
{% endschema %}
