{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

<div
  id="double-image-section"
  class="section-{{ section.id }}-padding animate-section animate--hidden {{ section.settings.visibility }}"
  data-content="#shopify-section-{{ section.id }}"
>
  <section class="double-img-txt animate-item animate-item">
    <div class="double-image-text animate-item animate-item">
      <div class="left-side animate-item animate-item">
        {%- if section.settings.image1 != blank -%}
          <img src="{{ section.settings.image1 | image_url }}">
        {%- else -%}
          {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
        {%- endif -%}

        <h1>{{ section.settings.headline }}</h1>
        <p></p>
        <p>{{ section.settings.text }}</p>
        <p></p>

        {% if section.settings.point1 != blank %}
          <div class="point">
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
              <path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.959 17l-4.5-4.319 1.395-1.435 3.08 2.937 7.021-7.183 1.422 1.409-8.418 8.591z"></path>
            </svg>
            <p class="product__text inline-richtext">
              {{ section.settings.point1 }}
            </p>
          </div>
        {% endif %}

        {% if section.settings.point2 != blank %}
          <div class="point">
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
              <path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.959 17l-4.5-4.319 1.395-1.435 3.08 2.937 7.021-7.183 1.422 1.409-8.418 8.591z"></path>
            </svg>
            <p class="product__text inline-richtext">
              {{ section.settings.point2 }}
            </p>
          </div>
        {% endif %}

        {% if section.settings.point3 != blank %}
          <div class="point">
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
              <path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.959 17l-4.5-4.319 1.395-1.435 3.08 2.937 7.021-7.183 1.422 1.409-8.418 8.591z"></path>
            </svg>
            <p class="product__text inline-richtext">
              {{ section.settings.point3 }}
            </p>
          </div>
        {% endif %}
      </div>

      <div class="right-side animate-item animate-item">
        {%- if section.settings.image2 != blank -%}
          <img src="{{ section.settings.image2 | image_url }}">
        {%- else -%}
          {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
        {%- endif -%}

        <h1>{{ section.settings.headline2 }}</h1>
        <p></p>
        <p>{{ section.settings.text2 }}</p>
        <p></p>

        {% if section.settings.point4 != blank %}
          <div class="point">
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
              <path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.959 17l-4.5-4.319 1.395-1.435 3.08 2.937 7.021-7.183 1.422 1.409-8.418 8.591z"></path>
            </svg>
            <p class="product__text inline-richtext">
              {{ section.settings.point4 }}
            </p>
          </div>
        {% endif %}
        {% if section.settings.point5 != blank %}
          <div class="point">
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
              <path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.959 17l-4.5-4.319 1.395-1.435 3.08 2.937 7.021-7.183 1.422 1.409-8.418 8.591z"></path>
            </svg>
            <p class="product__text inline-richtext">
              {{ section.settings.point5 }}
            </p>
          </div>
        {% endif %}

        {% if section.settings.point6 != blank %}
          <div class="point">
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
              <path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.959 17l-4.5-4.319 1.395-1.435 3.08 2.937 7.021-7.183 1.422 1.409-8.418 8.591z"></path>
            </svg>
            <p class="product__text inline-richtext">
              {{ section.settings.point6 }}
            </p>
          </div>
        {% endif %}
      </div>
    </div>
  </section>
</div>

<style>
  .double-img-txt{

    background: linear-gradient(145deg, {{ section.settings.backgroundcolor }} 5%, {{ section.settings.backgroundcolor2 }} 48%, {{ section.settings.backgroundcolor3 }} 94%);

    color:  {{ section.settings.textcolor }};
    padding: 10rem;
  }
  .double-img-txt svg{
    fill: {{ section.settings.textcolor }};
  }
  .double-image-text {
    max-width: 900px;
    margin: auto;
    display: flex;
    gap: 50px;
  }
  .left-side, .right-side{
    width: 50%;
  }
  .double-image-text h1 {
    font-size: 3.5rem;
    color:  {{ section.settings.textcolor }};
    margin: 1.5rem 0;
  }
  .double-image-text img{
    width: 100%;
    border-radius: {{ section.settings.imageborderradius }}px;
  }

  @media screen and (max-width: 749px){
    .double-img-txt{
      padding: 0 0 2rem;
    }
    .double-image-text {
      flex-direction: column;
      gap: 30px;
    }
    .left-side, .right-side{
      width: 100%;
    }
    .double-image-text .left-side img{
      box-shadow: 1px 2px 10px #2b363c59;
    }
    .double-image-text h1 {
      font-size: 3rem;
      margin: 1rem 0;
    }
    .double-image-text h1, .double-image-text p, .double-image-text .point{
      padding: 0 2rem;
    }
    .double-image-text .point p{
      padding: 0;
    }
    .double-image-text img{
      border-radius: 0;
    }
  }

    .point {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 5px 0 !important;
  }
  .point .product__text {
    margin: 0;
    font-size: 1.5rem;
  }
</style>

{% schema %}
{
  "name": "Double Image with content",
  "settings": [
     {
      "type": "select",
      "id": "visibility",
      "options": [
        {
          "value": "desktop-hidden",
          "label": "Mobile only"
        },
        {
          "value": "mobile-hidden",
          "label": "Desktop only"
        },
        {
          "value": "always-display",
          "label": "All devices"
        }
      ],
      "label": "Display on",
      "default": "always-display"
    },
    {
      "type": "header",
      "content": "Gradient or solid color background",
        "info": "If you want a solid background color simply have each field the same color"
    },
    {
      "type": "color",
      "id": "backgroundcolor",
      "label": "Color 1",
      "default": "#FFFFFF"
    },
        {
      "type": "color",
      "id": "backgroundcolor2",
      "label": "Color 2",
      "default": "#FFFFFF"
    },
            {
      "type": "color",
      "id": "backgroundcolor3",
      "label": "Color 3",
      "default": "#FFFFFF"
    },
        {
      "type": "header",
      "content": "Text color"
    },
    {
      "type": "color",
      "id": "textcolor",
      "label": "Text Color",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "imageborderradius",
      "min": 0,
      "max": 20,
      "step": 1,
      "default": 10,
      "unit": "px",
      "label": "Image border radius"
    },
    {
      "type": "header",
      "content": "Left side"
    },
    {
      "type": "image_picker",
      "id": "image1",
      "label": "Image 1"
    },
    {
      "type": "text",
      "id": "headline",
      "label": "Headline 1",
      "default": "Headline"
    },
    {
      "type": "inline_richtext",
      "id": "text",
      "label": "Text content",
      "default": "Pair text with an image to focus on your chosen product."
    },
    {
      "type": "header",
      "content": "Leave blank if you don't want to show any point"
    },
    {
      "type": "text",
      "id": "point1",
      "label": "Point 1",
      "default": "Point 1"
    },
    {
      "type": "text",
      "id": "point2",
      "label": "Point 2",
      "default": "Point 2"
    },
    {
      "type": "text",
      "id": "point3",
      "label": "Point 3",
      "default": "Point 3"
    },
    {
      "type": "header",
      "content": "Right side"
    },
    {
      "type": "image_picker",
      "id": "image2",
      "label": "Image 2"
    },
    {
      "type": "text",
      "id": "headline2",
      "label": "Headline 2",
      "default": "Headline"
    },
    {
      "type": "inline_richtext",
      "id": "text2",
      "label": "Text content",
      "default": "Pair text with an image to focus on your chosen product."
    },
    {
      "type": "text",
      "id": "point4",
      "label": "Point 1",
      "default": "Point 1"
    },
    {
      "type": "text",
      "id": "point5",
      "label": "Point 2",
      "default": "Point 2"
    },
    {
      "type": "text",
      "id": "point6",
      "label": "Point 3",
      "default": "Point 3"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
  ],
  "presets": [
    {
      "name": "Double Image with content",
      "category": "Features"
    }
  ],
  "disabled_on": {
    "groups": ["header", "footer"]
  }
}
{% endschema %}
