{% for case in cases %}
<div class="use-cases__single" data-case-id="{{ case.id }}" data-case-index="{{ loop.index0 }}" {{ loop.index0 > 5 ? 'data-aos="zoom-in" data-aos-delay="{{ loop.index0 * 50 }}" data-aos-once="true" data-aos-anchor-placement="top-bottom"' }}>
    <div class="use-cases__single-image-wrap">
        <img class="use-cases__single-image" src="{{ case.thumbnail.src }}" alt="Use case image" />
    </div>
    <div class="use-cases__single-content">
        <div>
            <h4 class="light-text med">{{ case.title }}</h4>
            <h6 class="dark-text med m-t-5">{{ __('Value add', 'linde') }}</h6>
            <h6 class="use-cases__single-content--restricted">{{ case.value_text }}</h6>
        </div>
        <div class="m-t-5 use-cases__single-button">
            <h6 class="dark-text med">{{ __('Learn more', 'linde') }}</h6>
            <img class="use-cases__single-button-icon" src="{{ function('get_frontend_static_asset', 'assets/icons/classic-arrow-icon.svg') }}" />
        </div>
    </div>
</div>
{% endfor %}