people.html

---
layout: page
title: People
---
<style>
.grid-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, 240px);
      justify-content: center;
}

.people {
    margin: 5px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.profilepic {
    width: 175px;
    height: 175px;
    margin: 1em; 
    border-radius: 50%;
}
.position {
    color: grey
}
.name {
    font-size: 1.2em
}
</style>


<div class="grid-container">
{% for p in site.people %}
    <div class="people">
        <div>
        <a href="{{p.url}}">
        <img src="{{p.picture}}" alt="Profile Picture" class="profilepic">
        </a>
        </div>
        <div class="name">
        <a href="{{p.url}}">
        {{p.name}} 
        </a>
        </div>
        <div class="position">
        {{p.position}}
        </div>
        <div>
        {{p.research}}
        </div>
    </div>
{% endfor %}
</div>