<div class="person-item person-item--brandon-bohrn">
<figure>
<img src="/images/team/brandon-bohrn.png" alt="Brandon Bohrn">
</figure>
<h3>Brandon Bohrn</h3>
<h4>Manager, Transatlantic Relations</h4>
</div>
<div class="person-item person-item--{{ person.name | lower | replace(' ', '-') }}">
<figure>
<img src="/images/team/{{ person.name | lower | replace(' ', '-') }}.png" alt="{{person.name}}">
</figure>
<h3>{{person.name}}</h3>
<h4>{{person.job}}</h4>
</div>
{
"person": {
"name": "Brandon Bohrn",
"job": "Manager, Transatlantic Relations"
}
}
.person-item { text-align: center; }
.person-item figure {
--n: 4;
--d: 3;
padding-bottom: calc(var(--n) / var(--d) * 100%);
position: relative;
margin: 0;
}
.person-item figure > * {
overflow: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}
.person-item figure > img,
.person-item figure > video {
width: 100%;
height: 100%;
object-fit: cover;
}
.person-item h3 { margin-bottom: 0;}
.person-item h4 {
margin-top: var(--s-2);
font-weight: 300;
}
There are no notes for this item.