{% if section.background %}
<div class="bg-section" style="background: {{ section.background }};">
{% endif %}
    <section class="polaroid-group baguette" {% if section.css %}style="{{ section.css }}"{% endif %} >
    <div class="polaroid-line" style="width: 100%; height: 33vh;">
    {% for image in line %}
        {% set caption = image.text %}
        {% if image.angle %}
           {% set angle = image.angle %}
        {% else %}
            {% set angle = 20 %}
        {% endif %}
        {% if image.x %}
            {% set x = image.x %}
        {% else %}
            {% set x = "0px" %}
        {% if image.y %}
            {% set y = image.y %}
        {% else %}
            {% set y = "0px" %}
        {% endif %}
        {% if image.z %}
            {% set z = image.z %}
        {% else %}
            {% set z = 2 %}
        {% endif %}
        {% set image = Image(image) %}
        {{ image.copy() }}
        {% set ratio = image.ratio %}
        <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") }}"
            class="polaroid"
            style="left: {{ x }}; top: {{ y }}; z-index: {{ z }}; -webkit-transform: rotate({{ angle }}deg); -moz-transform: rotate({{ angle }}deg); transform: rotate({{ angle }}deg);">
                {% if caption %}
                <img class="lazy" src="" data-original="{{ image.generate_thumbnail("x450") }}" alt="{{ caption }}">
                <h5 class="polaroid__title">{{ caption }}</h5>
                {% else %}
                <img class="lazy" src="" data-original="{{ image.generate_thumbnail("x450") }}" alt="unnamed image">
                {% endif %}
        </a>
    </div>
    {% endfor %}
{% if section.background %}
</div>
{% endif %}
<!-- vim: ts=8 et sw=4 sts=4
-->