{% if section.background %}
    <div id="bg-section" style="background: {{ section.background }};">
{% endif %}

<div class="container baguette">
    <div class="row">
        {% for line in section.images %}
            {% set number = line|length %}
            {% for image in line %}
                <div class="col s12 m{{24 // number }} l{{12 // number }}">
                    <div class="card">
                        {% if image.type == "video" %}
                            {% set video = Video(image) %}
                            {{ video.copy() }}
                            <div class="picture card-image">
                                <img class="lazy" data-original="{{ video.generate_thumbnail("600") }}">
                                <video class="lazy" id="video" poster="{{ video.generate_thumbnail("600") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted="">
                                    <source src="{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm">
                                </video>
                            </div>
                            {% set video = "" %}
                        {% else %}
                            {% set caption = image.text %}
                            {% set image = Image(image) %}
                            {{ image.copy() }}

                            <div class="picture card-image caption">
                                <a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}
                                    data-at-450="{{ image.generate_thumbnail("x450") }}"
                                    data-at-800="{{ image.generate_thumbnail("x800") }}"
                                    data-at-1366="{{ image.generate_thumbnail("x1366") }}"
                                    data-at-1920="{{ image.generate_thumbnail("x1920") }}"
                                    >
                                    <img class="lazy" data-original="{{ image.generate_thumbnail("x600") }}">
                                    {% if caption %}
                                    <div class="caption__overlay center">
                                        <h5 class="caption__overlay__title">{{ caption }}</h5>
                                    </div>
                                    {% endif %}
                                </a>
                            </div>
                        {% endif %}
                    </div>
                </div>
            {% endfor %}
        {% endfor %}
    </div>
</div>

{% if section.background %}
    </div>
{% endif %}
