{% if clients|length > 0 %}
<section class="uk-section" id="customer">
    <div class="uk-container">
        <div class="uk-width-1-1 ">
            <h1 class="uk-text-center">{{ blocks | getBlock('customer_title') }}</h1>
        </div>
        <div class="uk-padding-large" uk-slider>
            <div class="uk-position-relative">
                <div class="uk-slider-container uk-light">
                    <ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m">
                        {% for client in clients %}
                        <li class="uk-text-center">
                            <div class="uk-panel">
                                <img src="./img/client/{{ client.logo }}" alt="{{ client.logoAlt }}" width="150" height="91">
                            </div>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
                <div class="uk-hidden@s uk-light">
                    <a class="uk-position-center-left uk-position-small" href="#" uk-slidenav-previous
                        uk-slider-item="previous"></a>
                    <a class="uk-position-center-right uk-position-small" href="#" uk-slidenav-next
                        uk-slider-item="next"></a>
                </div>
                <div class="uk-visible@s">
                    <a class="uk-position-center-left-out uk-position-small" href="#" uk-slidenav-previous
                        uk-slider-item="previous"></a>
                    <a class="uk-position-center-right-out uk-position-small" href="#" uk-slidenav-next
                        uk-slider-item="next"></a>
                </div>
            </div>
        </div>
    </div>
</section>
{% endif %}