{% if services|length > 0 %}
<section class="uk-section" id="service">
    <div class="uk-container">
        <div class="uk-width-1-1">
            <div class="uk-text-center">
                <p class="uk-h1">{{ blocks | getBlock('service_title') }}</p>
                <div class="uk-h2 uk-width-2xlarge uk-inline">{{ blocks | getBlock('service_description') }}</div>
            </div>
        </div>
        <div class="tm-grid-expand uk-grid-large uk-grid-margin-large uk-grid">
            <div class="uk-child-width-1-1 uk-child-width-1-1@s uk-grid-large uk-grid-match uk-grid uk-child-width-expand@s"
                uk-grid="parallax: 400">
                {% set counter = 0 %}
                
                {% for service in services %}
                    {% if counter == 0 %}
                    <div>
                    {% endif %}
                    <div class="uk-card {{service.cardColor ? 'uk-card-'~ service.cardColor : 'uk-card-default'}} uk-card-body uk-grid-margin">
                        <span uk-icon="icon: {{service.icon ? service.icon : 'code'}}; ratio: 3"></span>
                        <h1 class="el-title uk-h4 uk-margin-top uk-margin-remove-bottom">{{ service.title }}</h1>
                        <div class="el-content uk-panel uk-margin-top">{{ service.content }}</div>
                    </div>
                {% if counter == 1 %}
                    </div>
                    {% set counter = 0 %}

                {% else %}
                    {% set counter = counter + 1 %}

                {% endif %}

                {% endfor %}
            </div>
        </div>
    </div>
</section>
{% endif %}