<div class="three-col" style="background-color:{{ page.header.bgcolor }};">
<div class="three-col-content" style="color:{{ page.header.fontcolor }};">

{% block content %}
    <section id="{{ page.header.section_id }}" class="services">
       <div class="row">
             {% for item in page.header.services %}
               <div class="four columns">
                   <div class="framed">
                   <div class="service-logo"> <img src="../user/themes/disroot/images/logo_{{ item.icon }}"></div>

                           <a href="{{ item.link }}">
                           <h2>{{ item.title }}</h2>
                             <p class="service">
                               {{ item.text }}
                           </p>
                          </a>
                          <div class="service-badge">{{ item.badge }}</div>

                      <a href="{{ item.button }}" class="service-btn">{{ item.buttontext }}</a>
                   </div>
               </div>
             {% endfor %}
       </div>
     </section>
{% endblock %}

</div>
</div>
