{% if include.padding != nil and include.padding != true %}
  {% assign padding = false %}
{% else %}
  {% assign padding = true %}
{% endif %}

<section class="cm-gray-2 body-font">
  <div class="container px-5 {% if padding == true %}py-24{% endif %} mx-auto">
    {% if include.data.title or include.data.text or include.data.link %}
    <div class="flex flex-col text-center w-full mb-20">
      {% if include.data.title %}<h1 class="header-text title-font mb-4 cm-gray-1">{{ include.data.title }}</h1>{% endif %}
      {% if include.data.text %}<p class="lg:w-2/3 mx-auto leading-relaxed text-base">{{ include.data.text }}</p>{% endif %}
      {% if include.data.link and include.no_link != true %}
      <a class="text-secondary inline-flex items-center justify-center color-link" href="{% include fnc/link.html item=include.data.link %}" alt="learn more">Learn More <img class="w-4 h-4 ml-2" alt="Arrow pointing right" src="{{ '/assets/learn.svg' | relative_url }}" /></a>
      {% endif %}
    </div>
    {% endif %}
    <div class="flex flex-wrap">
      {% assign function_len = include.data.functions | size %}
      {% for item in include.data.functions %}
      <div class="xl:w-1/{{ function_len }} lg:w-1/2 md:w-full px-8 py-6">
        <h2 class="text-lg sm:text-xl cm-gray-1 font-medium title-font mb-2">{{ item.title }}</h2>
        <p class="leading-relaxed text-base mb-4">
          {{ item.text }}
          {% if include.extend and item.extend %}<br><br>{{ item.extend }}{% endif %}
        </p>
        {% if item.link %}
        <a class="text-secondary inline-flex items-center color-link" href="{% include fnc/link.html item=item.link %}" alt="learn more">Learn More <img class="w-4 h-4 ml-2" alt="Arrow pointing right" src="{{ '/assets/learn.svg' | relative_url }}" /></a>
        {% endif %}
      </div>
      {% endfor %}
    </div>
  </div>
</section>