{% for section in include.services %}
{% assign mod = forloop.index | modulo: 2 %}
<section id="{{ section.section_id }}"
  class="{% if mod == 1 %} bg-medium  text-featured {% else %} bg-dark {% endif %} padding-lg border-t-[10px] border-featured {% if forloop.last %}border-b-[10px]{% endif %}">

  <div class="grid {% if section.no_of_columns == 'three' %} md:landscape:grid-cols-3 md:portrait:grid-cols-2 {% elsif section.no_of_columns == 
    'two' %}md:grid-cols-2{% endif %} grid-cols-1">

    {% for item in section.group %}

      <!-- H2 -->
      <div class="col-span-full border-b {% if mod == 1 %}border-featured {% else %}border-white{% endif %} {% unless forloop.first %}mt-12{% endunless %}">
        <h2 class="heading-lg mb-4">{{ item.h2_heading }}</h2>
      </div>

      {% for service in item.sub_services %}
        <div class="py-8 flex gap-4 justify-center items-start">
          <img src="{{ service.icon_image }}" alt=""
               class="object-contain object-center h-[1.8rem] mb-8 {% if mod == 1 %} icon-filter {% else %}icon-filter-light{% endif %}">

          <div class="md:w-[80%]">
            <h3 class="mb-4 text-xl leading-[1]">{{ service.h3_heading }}</h3>
            {{ service.paragraph_html }}
          </div>
        </div>
      {% endfor %}

    {% endfor %}

  </div>
</section>

{% endfor %}