<!-- homepage gallery -->
<div class="container">
  <div class="d-flex flex-wrap flex-row justify-content-center">
    {% for item in carousel %}
      <div class="col-12 col-sm-6 col-lg-4 my-2">
        <div class="card frontpage-gallery">
          <a href="{{ item.url }}">
            <img class="card-img institution" src="{{ item.img if item.img.startswith('http') else pathto('_images/' + item.img, 1) }}" alt="{{ item.alt }}">
            <div class="card-img-overlay px-3 py-1">
              <p class="lead mb-1 fadeout">{{ item.title }}</p>
              <p class="card-text fadeout">{{ item.text }}</p>
            </div>
          </a>
        </div>
      </div>
    {% endfor %}
  </div>
</div>
<!-- funders -->
<div class="container my-4">
  <p class="h4 text-center font-weight-light">Funders</p>
  <div id="funder-logos" class="d-flex flex-wrap flex-row justify-content-center align-items-center">
    {% for item in funders -%}
      <div class="card my-1 mx-2 {{ item.klass }}" style="{{ 'width: ' + item.size + 'rem;' }}">
        <a href="{{ pathto('funding.html', 1) }}">
            <img class="card-img institution" src="{{ pathto('_static/funding/' + item.img, 1) }}" title="{{ item.title }}" alt="{{ item.title }}">
        </a>
      </div>
    {% endfor %}
  </div>
</div>
<!-- institutions -->
<div class="container my-4">
  <p class="h4 text-center font-weight-light">Supporting institutions</p>
  <div id="institution-logos" class="d-flex flex-wrap flex-row justify-content-center align-items-center">
    {% for inst in institutions -%}
      <div class="card my-1 mx-2 {{ inst.klass }}" style="{{ 'width: ' + inst.size + 'rem;' }}">
        <a href="{{ inst.url }}">
          <img class="card-img institution" src="{{ pathto('_static/institution_logos/' + inst.img, 1) }}" title="{{ inst.name }}" alt="{{ inst.name }}"/>
        </a>
      </div>
    {% endfor %}
  </div>
</div>
