{%- 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 class="section-{{ section.id }}-padding animate-section animate--hidden {{ section.settings.visibility }}" data-content="#shopify-section-{{ section.id }}">  
  
<section class="icon-text-features animate-item animate-item" style="background-color: {{ section.settings.color_accent }}">
  <div class="container">
    <div class="section-header2">
      <h2 style="color: {{ section.settings.title_color }}">{{ section.settings.section_title }}</h2>
      <p style="color: {{ section.settings.text_color }}">{{ section.settings.section_subtitle }}</p>
    </div>

    <div class="icon-text-blocks">
      {% for block in section.blocks %}
        <div class="icon-text-block">
          {% if block.settings.icon_image %}
            <div class="icon">
              <img src="{{ block.settings.icon_image | image_url }}" alt="Icon">
            </div>
          {% endif %}
          <div class="text">
            <p>{{ block.settings.block_text }}</p>
          </div>
        </div>
      {% endfor %}
    </div>
  </div>
</section>

    </div>

<style>
  .icon-text-features {
    border: 1px solid #e1e3e5;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    max-width: 1170px;
    margin: 0 auto;
  }
  .section-header2 h2 {
    font-size: 24px;
    font-weight: bold;
  }
  .section-header2 p {
    font-size: 16px;
    color: #6b6b6b;
  }
  .icon-text-blocks {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .icon-text-block {
    display: flex;
    align-items: center;
    border: 1px solid #e1e3e5;
    padding: 10px;
    border-radius: 8px;
  }
  .icon {
    width: 50px;
    margin-right: 15px;
  }
  .icon img {
    max-width: 100%;
  }
  .text p {
    margin: 0;
    font-size: 16px;
    color: #333;
  }
  @media (min-width: 768px) {
    .icon-text-blocks {
      grid-template-columns: repeat({{ section.settings.columns_desktop }}, 1fr);
    }
  }
</style>

 {% if section.settings.disableborder %}
<style>
.icon-text-features {
    border: 0px;
}
</style>
{% endif %}

{% schema %}
{
  "name": "Icon & Text Features",
  "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": "color",
  "id": "title_color",
  "label": "Title font color",
  "default": "#000000"
},
    {
      "type": "text",
      "id": "section_title",
      "label": "Section Title",
      "default": "Headline Title"
    },
            {
  "type": "color",
  "id": "text_color",
  "label": "Text font color",
  "default": "#000000"
},
    {
      "type": "textarea",
      "id": "section_subtitle",
      "label": "Section Subtitle",
      "default": "Pair icons with content to focus on your feature or benefit."
    },
      {
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 4,
      "step": 1,
      "default": 3,
      "label": "Columns desktop"
    },

    {
  "type": "color",
  "id": "color_accent",
  "label": "Background color",
  "default": "#FFFFFF"
},
       {
          "type": "checkbox",
          "id": "disableborder",
          "default": false,
          "label": "Disable border"
        },
     {
      "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
    }
  ],
  "blocks": [
    {
      "type": "icon_text_block",
      "name": "Icon & Text Block",
      "settings": [
        {
          "type": "image_picker",
          "id": "icon_image",
          "label": "Icon Image"
        },
        {
          "type": "text",
          "id": "block_text",
          "label": "Text",
          "default": "Example text"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Icon & Text Features",
      "category": "Features",
         "blocks": [
        {
          "type": "icon_text_block"
        },
        {
          "type": "icon_text_block"
        },
        {
          "type": "icon_text_block"
        }
      ]
    }
  ],
  "disabled_on": {
    "groups": ["header", "footer"]
  }
}
{% endschema %}
