{% if section.background %}
<div class="bg-section" style="background: {{ section.background }};">
  {% endif %}
  <section class="pictures-group baguette" {% if section.css %}style="{{ section.css }}"{% endif %} >
    {% for line in section.images %}
    <div class="pictures-line">
      {% for image in line %}
      {% set caption = image.text %}
      {% if image.type == "video" %}
      {% set video = Video.get(link, image) %}
      {% set format = settings.ffmpeg.extension %}
      {% set vid = video.reencode((1280, 720)) %}
      {% set ratio = video.ratio %}
      {% else %}
      {% set image = Image.get(link, image) %}
      {% set ratio = image.ratio %}
      {% endif %}
      <div class="picture caption" style="flex-grow: {{ ratio }}">
        {% if image.type == "video" %}
        {% if loop.length == 1 %}
        <img class="lazy" data-src="{{ video.thumbnail((None, 1366)) }}" src="./../static/img/11-14.svg" alt="">
        {% else %}
        <img class="lazy" data-src="{{ video.thumbnail((None, 600)) }}" src="./../static/img/11-14.svg" alt="">
        {% endif %}
        <video class="lazy" id="{{ vid }}" onclick="goFullscreen('{{ vid }}');" data-src="{{ vid }}" data-poster="{{ video.thumbnail((None, 600)) }}" alt="" loop="loop" preload="none" autoplay muted {% if image.controls %}controls="true"{% endif %}>
          <source data-src="{{ vid }}" type="video/{{ format }}">
        </video>
        {% if caption %}
        <div class="caption__overlay">
          <h5 class="caption__overlay__title">{{ caption }}</h5>
        </div>
        {% endif %}
        {% else %}
        <a href="{{ image.copy() }}" {% if caption %}data-caption="{{ caption }}"{% endif %}
           data-at-450="{{ image.thumbnail((None, 450)) }}"
           data-at-800="{{ image.thumbnail((None, 800)) }}"
           data-at-1366="{{ image.thumbnail((None, 1366)) }}"
           data-at-1920="{{ image.thumbnail((None, 1920)) }}"
           >
	{% if loop.length == 1 %}
           <img class="lazy" src="{% if caption %}./../static/img/11-14.svg{% endif %}" data-src="{{ image.thumbnail((None, 1366)) }}" alt="">
	{% else %}
           <img class="lazy" src="{% if caption %}./../static/img/11-14.svg{% endif %}" data-src="{{ image.thumbnail((None, 600)) }}" alt="">
	{% endif %}
           {% if caption %}
           <div class="caption__overlay">
             <h5 class="caption__overlay__title">{{ caption }}</h5>
           </div>
           {% endif %}
        </a>
        {% endif %}
      </div>
      {% if not loop.last %}
      <div class="separator"></div>
      {% endif %}
      {% endfor %}
    </div>
    {% endfor %}
  </section>
  {% if section.background %}
</div>
{% endif %}
