{% if item.images.desktop %}
          <div class="device-wrapper desktop">
            <div data-device="Macbook2015" data-orientation="portrait" data-color="black" class="device">
              <div style="background-image: url({{item.images.desktop}}&sa=jpg&w=1200)" class="screen"></div>
              <div class="button"></div>
            </div>
          </div>
          {% endif %}

          {% if item.images.mobile %}
          <div class="device-wrapper mobile">
            <div data-device="iPhone7" data-orientation="portrait" data-color="white" class="device">
              <div style="background-image: url({{item.images.mobile}}&sa=jpg&w=200)" class="screen"></div>
              <div class="button"></div>
            </div>
          </div>
          {% endif %}

          {% if item.images.tablet %}
          <div class="device-wrapper tablet">
            <div data-device="iPad" data-orientation="portrait" data-color="white" class="device">
              <div style="background-image: url({{item.images.tablet}}&sa=jpg&w=800)" class="screen"></div>
              <div class="button"></div>
            </div>
          </div>
          {% endif %}

        </div>
      {% endif %}

      {% if item.img %}
        <div class="browser">
          <img src="{{item.img}}&sa=jpg&w=1200" class="img-fluid border">
        </div>
      {% endif %}

      {% if item.embed %}
        {{item.embed}}
      {% endif %}

      {% if item.gallery %}
      <hr>
      <div class="d-flex flex-nowrap overflow-auto justify-content-center">
        {% for pic in item.gallery %}
        <img src="{{pic.img}}&crop-to-fit&h=75" data-swap-image="{{pic.img}}&crop-to-fit&w=800" data-swap-image-target="{{pic.device}}" class="mr-1 border border-light p-1">
        {% endfor %}
      </div>
      {% endif %}

    </div>
    <div class="element-text">
      <div class="h4">{{ item.title }}</div>
      <div class="markdown">
        {{ item.content|markdown() }}
      </div>
      {% if item.url %}
      <a href="{{item.url}}" rel="noopener" class="btn btn-outline-secondary" target="_blank"><img src="/themes/default/assets/external-link.svg" width="13" class="mr-3"><span>Website aufrufen</span></a>
      {% endif %}
    </div>
  </div>
</div>
{% endif %}

{% endfor %}