{% set slides = page.media.images %}

{% block custom_stylesheets %}
    {% do assets.addCss('theme://css/autoslideshow.css', 90) %}
    {% set slideStyle %}
        .auto-slideshow img { 
            animation-duration: {{ page.header.duration * 3 }}s;
        }
        {% for image in slides %}
            .auto-slideshow img:nth-child({{ loop.index }}) { animation-delay: {{ loop.index0 * page.header.duration }}s }
        {% endfor %}
    {% endset %}
    {% do assets.addInlineCss(slideStyle, 90) %}
{% endblock %}
<div class="page-cell">
    <div class="text-tab-content grid-prop current-tab">
        <div class="text-inner">
            <div class="auto-slideshow">
                {% for image in slides %}
                    <img loading="lazy" src="{{ image.url }}" alt="Slide">
                {% endfor %}
            </div>
        </div>
    </div>
</div>