<div class="tiled-gallery">
  <div class="tiled-gallery-inner">
    {% assign onError = 'onerror="' | append: 'this.parentElement.parentElement.removeChild(this.parentElement);"' %}
    {% if include.screenshots.size <= 3 %} {% for item in include.screenshots %}

    <a class="tiled-item" href="{{ item }}"
       data-size="{{ item| image.width }}x{{ item | image.height }}">
      <img {{ onError }} src="{{ item | img_url: 'medium'  }}" alt="Screenshot" />
    </a>
    {% endfor %}
    {% elsif include.screenshots.size == 4 %}
    {% for item in include.screenshots limit: 1 %}
    <a class="tiled-item" href="{{ item }}"
      data-size="{{ item| image.width }}x{{ item | image.height }}">
      <img {{ onError }} src="{{ item | img_url: 'medium'  }}" alt="Screenshot" />
    </a>
    {% endfor %}
    <div class="tiled-items-container">
      {% for item in include.screenshots limit: 2 offset: 1 %}
      <a class="tiled-item" href="{{ item }}"
        data-size="{{ item| image.width }}x{{ item | image.height }}">
        <img {{ onError }} src="{{ item | img_url: 'medium'  }}" alt="Screenshot" />
      </a>
      {% endfor %}
    </div>
    {% for item in include.screenshots offset: 3 %}
    <a class="tiled-item" href="{{ item }}"
      data-size="{{ item| image.width }}x{{ item | image.height }}">
      <img {{ onError }} src="{{ item | img_url: 'medium'  }}" alt="Screenshot" />
    </a>
    {% endfor %}
    {% elsif include.screenshots.size == 5 %}
    {% for item in include.screenshots limit: 1 %}
    <a class="tiled-item" href="{{ item }}"
      data-size="{{ item| image.width }}x{{ item | image.height }}">
      <img {{ onError }} src="{{ item | img_url: 'medium'  }}" alt="Screenshot" />
    </a>
    {% endfor %}
    <div class="tiled-items-container">
      {% for item in include.screenshots limit: 2 offset: 1 %}
      <a class="tiled-item" href="{{ item }}"
        data-size="{{ item| image.width }}x{{ item | image.height }}">
        <img {{ onError }} src="{{ item | img_url: 'medium'  }}" alt="Screenshot" />
      </a>
      {% endfor %}
    </div>
    <div class="tiled-items-container">
      {% for item in include.screenshots limit: 2 offset: 3 %}
      <a class="tiled-item" href="{{ item }}"
        data-size="{{ item| image.width }}x{{ item | image.height }}">
        <img {{ onError }} src="{{ item | img_url: 'medium'  }}" alt="Screenshot" />
      </a>
      {% endfor %}
    </div>
    {% elsif include.screenshots.size == 6 %}
    {% for item in include.screenshots limit: 1 %}
    <a class="tiled-item" href="{{ item }}"
      data-size="{{ item| image.width }}x{{ item | image.height }}">
      <img {{ onError }} src="{{ item | img_url: 'medium'  }}" alt="Screenshot" />
    </a>
    {% endfor %}
    <div class="tiled-items-container">
      {% for item in include.screenshots limit: 2 offset: 1 %}
      <a class="tiled-item" href="{{ item }}"
        data-size="{{ item| image.width }}x{{ item | image.height }}">
        <img {{ onError }} src="{{ item | img_url: 'medium'  }}" alt="Screenshot" />
      </a>
      {% endfor %}
    </div>
    <div class="tiled-items-container">
      {% for item in include.screenshots limit: 2 offset: 3 %}
      <a class="tiled-item" href="{{ item }}"
        data-size="{{ item| image.width }}x{{ item | image.height }}">
        <img {{ onError }} src="{{ item | img_url: 'medium'  }}" alt="Screenshot" />
      </a>
      {% endfor %}
    </div>
    {% for item in include.screenshots offset: 5 %}
    <a class="tiled-item" href="{{ item }}"
      data-size="{{ item| image.width }}x{{ item | image.height }}">
      <img {{ onError }} src="{{ item | img_url: 'medium'  }}" alt="Screenshot" />
    </a>
    {% endfor %}
    {% elsif include.screenshots.size == 7 %}
    {% for item in include.screenshots limit: 1 %}
    <a class="tiled-item" href="{{ item }}"
      data-size="{{ item| image.width }}x{{ item | image.height }}">
      <img {{ onError }} src="{{ item | img_url: 'medium'  }}" alt="Screenshot" />
    </a>
    {% endfor %}
    <div class="tiled-items-container">
      {% for item in include.screenshots limit: 2 offeset: 1 %}
      <a class="tiled-item" href="{{ item }}"
        data-size="{{ item| image.width }}x{{ item | image.height }}">
        <img {{ onError }} src="{{ item | img_url: 'medium'  }}" alt="Screenshot" />
      </a>
      {% endfor %}
    </div>
    <div class="tiled-items-container">
      {% for item in include.screenshots limit: 2 offset: 3 %}
      <a class="tiled-item" href="{{ item }}"
        data-size="{{ item| image.width }}x{{ item | image.height }}">
        <img {{ onError }} src="{{ item | img_url: 'medium'  }}" alt="Screenshot" />
      </a>
      {% endfor %}
    </div>
    {% for item in include.screenshots offset: 5 %}
    <a class="tiled-item" href="{{ item }}"
      data-size="{{ item| image.width }}x{{ item | image.height }}">
      <img {{ onError }} src="{{ item | img_url: 'medium'  }}" alt="Screenshot" />
    </a>
    {% endfor %}
    {% elsif include.screenshots.size == 8 %}
    {% for item in include.screenshots limit: 1 %}
    <a class="tiled-item" href="{{ item }}"
      data-size="{{ item| image.width }}x{{ item | image.height }}">
      <img {{ onError }} src="{{ item | img_url: 'medium'  }}" alt="Screenshot" />
    </a>
    {% endfor %}
    <div class="tiled-items-container">
      {% for item in include.screenshots limit: 2 offset: 1 %}
      <a class="tiled-item" href="{{ item }}"
        data-size="{{ item| image.width }}x{{ item | image.height }}">
        <img {{ onError }} src="{{ item | img_url: 'medium'  }}" alt="Screenshot" />
      </a>
      {% endfor %}
    </div>
    <div class="tiled-items-container">
      {% for item in include.screenshots limit: 2 offset: 3 %}
      <a class="tiled-item" href="{{ item }}"
        data-size="{{ item| image.width }}x{{ item | image.height }}">
        <img {{ onError }} src="{{ item | img_url: 'medium'  }}" alt="Screenshot" />
      </a>
      {% endfor %}
    </div>
    {% for item in include.screenshots
      limit: 1 offset: 5 %}
    <a class="tiled-item" href="{{ item }}"
      data-size="{{ item| image.width }}x{{ item | image.height }}">
      <img {{ onError }} src="{{ item | img_url: 'medium'  }}" alt="Screenshot" />
    </a>
    {% endfor %}
    <div class="tiled-items-container">
      {% for item in include.screenshots offset: 6 %}
      <a class="tiled-item" href="{{ item }}"
        data-size="{{ item| image.width }}x{{ item | image.height }}">
        <img {{ onError }} src="{{ item | img_url: 'medium'  }}" alt="Screenshot" />
      </a>
      {% endfor %}
    </div>
    {% elsif include.screenshots.size >= 9 %}
    {% for item in include.screenshots limit: 1 %}
    <a class="tiled-item" href="{{ item }}"
      data-size="{{ item| image.width }}x{{ item | image.height }}">
      <img {{ onError }} src="{{ item | img_url: 'medium'  }}" alt="Screenshot" />
    </a>
    {% endfor %}
    <div class="tiled-items-container">
      {% for item in include.screenshots limit: 2 offset: 1 %}
      <a class="tiled-item" href="{{ item }}"
        data-size="{{ item| image.width }}x{{ item | image.height }}">
        <img {{ onError }} src="{{ item | img_url: 'medium'  }}" alt="Screenshot" />
      </a>
      {% endfor %}
    </div>
    {% for item in include.screenshots
      limit: 1 offset: 3 %}
    <a class="tiled-item" href="{{ item }}"
      data-size="{{ item| image.width }}x{{ item | image.height }}">
      <img {{ onError }} src="{{ item | img_url: 'medium'  }}" alt="Screenshot" />
    </a>
    {% endfor %}
    <div class="tiled-items-container">
      {% for item in include.screenshots limit: 2 offset: 4 %}
      <a class="tiled-item" href="{{ item }}"
        data-size="{{ item| image.width }}x{{ item | image.height }}">
        <img {{ onError }} src="{{ item | img_url: 'medium'  }}" alt="Screenshot" />
      </a>
      {% endfor %}
    </div>
    <div class="tiled-items-container">
      {% for item in include.screenshots
        limit:2 offset: 6 %}
      <a class="tiled-item" href="{{ item }}"
        data-size="{{ item| image.width }}x{{ item | image.height }}">
        <img {{ onError }} src="{{ item | img_url: 'medium'  }}" alt="Screenshot" />
      </a>
      {% endfor %}
    </div>
    {% for item in include.screenshots
      offset: 8 %}
    <a class="tiled-item" href="{{ item }}"
      data-size="{{ item| image.width }}x{{ item | image.height }}">
      <img {{ onError }} src="{{ item | img_url: 'medium'  }}" alt="Screenshot" />
    </a>
    {% endfor %}
    {% endif %}

    {% if include.videos != nil %}
    {% for url in include.videos %}
    {{ oembed[url] }}
    {% endfor %}
    {% endif %}

  </div>
</div>

<div class="text-center">
  <button class="btn btn-link tiled-gallery-btn" type="button">
    <img {{ onError }} src="/assets/icons/camera.png">&nbsp;
    {{ t.software.view_all_photos }}
  </button>
</div>
