{% if technologies|length > 0 %}
<section class="uk-section uk-section-primary uk-preserve-color" id="technology">
    <div class="uk-container">
        <div class="uk-width-1-1 uk-light uk-margin-medium">
            <p class="uk-h1 uk-text-center uk-light">{{ blocks | getBlock('technology_title') }}</p>
        </div>
        <div class="uk-position-relative uk-visible-toggle" tabindex="-1" uk-slider="sets: true;center: true">
            <ul class="uk-slider-items uk-child-width-1-3@s uk-grid">
            {% for technology in technologies %}
                <li>
                    <div class="uk-card uk-card-default uk-card-body" style="min-height:500px;">
                    <div class="uk-text-center">
                        <img src="img/technology/{{ technology.image }}" alt="{{ technology.imageAlt }}">
                        <p class="uk-h2 uk-margin-remove-top">{{ technology.name }}</p>
                    </div>
                        <p>{{ technology.content }}</p>
                    </div>
                </li>
            {% endfor %}
            </ul>
            <div class="uk-light">
                <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin uk-light uk-margin-top"></ul>
            </div>

            <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous
                uk-slider-item="previous"></a>
            <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next
                uk-slider-item="next"></a>
        </div>
    </div>
</section>
{% endif %}