people.html

---
layout: page-header
id: people
title: Project Members
---
<section id="features" class="section">
    <!-- People Page for Large Screen with 4 person per row. -->
    <div class="container hide-on-med-and-down">
        {% assign rows = site.data.people.size | divided_by: 4.0 | ceil %}
        {% for i in (1..rows) %}
        {% assign offset = forloop.index0 | times: 4 %}
        <div class="row">
            {% for member in site.data.people limit:4 offset:offset %}

            {% include /people_card.html %}

            {% endfor %}
        </div>
        {% endfor %}
    </div>

    <!-- People Page for Medium Screen with 3 person per row. -->
    <div class="container hide-on-large-only hide-on-small-only">
        {% assign rows = site.data.people.size | divided_by: 3.0 | ceil %}
        {% for i in (1..rows) %}
        {% assign offset = forloop.index0 | times: 3 %}
        <div class="row">
            {% for member in site.data.people limit:3 offset:offset %}

            {% include /people_card.html %}

            {% endfor %}
        </div>
        {% endfor %}
    </div>

    <!-- People Page for Small Screen with 1 person per row. -->
    <div class="container hide-on-med-and-up">
        {% assign rows = site.data.people.size | divided_by: 1.0 | ceil %}
        {% for i in (1..rows) %}
        {% assign offset = forloop.index0 | times: 1 %}
        <div class="row">
            {% for member in site.data.people limit:1 offset:offset %}

            {% include /people_card.html %}

            {% endfor %}
        </div>
        {% endfor %}
    </div>
</section>