<section class="cm-gray-2 body-font">
  <div class="container px-5 py-24 mx-auto">
    <div class="flex flex-col text-center w-full mb-20">
      <h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 cm-gray-1">{{ include.data.title }}</h1>
      <p class="lg:w-2/3 mx-auto leading-relaxed text-base">{{ include.data.text }}</p>
    </div>
    <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" href="{{ item.link }}">Learn More {% include learn_more.html %}</a>
        {% endif %}
      </div>
      {% endfor %}
    </div>
  </div>
</section>