<div class="subsection">
  <h3>{{ page.header.title}}</h3>

  <div class="values align-content:center;">
    <div class="row ">
      {% for service in page.header.services %}
        {% if service.header == 'decalage' %}
          <div class="two columns">
            <table></table>
          </div>
        {% else %}

          <div class="one-third column value">
            <table>
              {% if service.icon %}
                <thead>
                  <tr>
                    <th>
                      <span class="fa-stack fa-4x">
                        <i class="fa fa-circle fa-stack-2x" style="color:#334d63;"></i>
                        <i class="fa fa-{{ service.icon }} fa-stack-1x fa-inverse"></i>
                      </span>
                      {% if service.header %}
                        <h5 class="service-heading">{{ service.header }}</h5>
                      {% endif %}
                    </th>
                  </tr>
                </thead>
              {% endif %}
              <tbody>
              {% if service.text %}
                <tr>
                  <td>{{ service.text }}</td>
                </tr>
              {% endif %}
              {% if service.cpu %}
                <tr>
                  <td>{{ service.cpu }}</td>
                </tr>
              {% endif %}
              {% if service.ram %}
                <tr>
                  <td>{{ service.ram }}</td>
                </tr>
              {% endif %}
              {% if service.disque %}
                <tr>
                  <td>{{ service.disque }}</td>
                </tr>
              {% endif %}
              {% if service.ipv4%}
                <tr>
                  <td>{{ service.ipv4 }}</td>
                </tr>
              {% endif %}
              {% if service.ipv6%}
                <tr>
                  <td>{{ service.ipv6 }}</td>
                </tr>
              {% endif %}
              {% if service.prix %}
                <tr>
                  <td>{{ service.prix }}</td>
                </tr>
              {% endif %}
              <tr>
                <td>
                  <a class="button button-primary" href="#souscrire">Souscrire</a>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      {% endif %}
    {% endfor %}
  </div>
</div>
<div class="section-description">
  {{ page.content }}
</div>
</div>
