No notes defined.
<div class=" team">
<div class="team__container container">
<div class="team__members">
<div class="team__member avatar">
<img class="avatar__photo" src="/media/dossier-1.jpg" alt="Jane Doe" />
<div class="avatar__info">
<h2 class="avatar__name">
Jane Doe
</h2>
<div class="avatar__title">
Executive Vice President of Operations
</div>
</div>
</div>
<div class="team__member avatar">
<img class="avatar__photo" src="/media/dossier-1.jpg" alt="Jane Doe" />
<div class="avatar__info">
<h2 class="avatar__name">
Jane Doe
</h2>
<div class="avatar__title">
Executive Vice President of Operations
</div>
</div>
</div>
<div class="team__member avatar">
<img class="avatar__photo" src="/media/dossier-1.jpg" alt="Jane Doe" />
<div class="avatar__info">
<h2 class="avatar__name">
Jane Doe
</h2>
<div class="avatar__title">
Executive Vice President of Operations
</div>
</div>
</div>
<div class="team__member avatar">
<img class="avatar__photo" src="/media/dossier-1.jpg" alt="Jane Doe" />
<div class="avatar__info">
<h2 class="avatar__name">
Jane Doe
</h2>
<div class="avatar__title">
Executive Vice President of Operations
</div>
</div>
</div>
<div class="team__member avatar">
<img class="avatar__photo" src="/media/dossier-1.jpg" alt="Jane Doe" />
<div class="avatar__info">
<h2 class="avatar__name">
Jane Doe
</h2>
<div class="avatar__title">
Executive Vice President of Operations
</div>
</div>
</div>
<div class="team__member avatar">
<img class="avatar__photo" src="/media/dossier-1.jpg" alt="Jane Doe" />
<div class="avatar__info">
<h2 class="avatar__name">
Jane Doe
</h2>
<div class="avatar__title">
Executive Vice President of Operations
</div>
</div>
</div>
<div class="team__member avatar">
<img class="avatar__photo" src="/media/dossier-1.jpg" alt="Jane Doe" />
<div class="avatar__info">
<h2 class="avatar__name">
Jane Doe
</h2>
<div class="avatar__title">
Executive Vice President of Operations
</div>
</div>
</div>
</div>
</div>
</div>
@mixin team {
$b: &;
&__members {
align-items: center;
display: flex;
flex-direction: column;
@include at(lg) {
flex-flow: row wrap;
justify-content: flex-start;
}
}
&__member {
@extend .avatar, .-horizontal;
@include at(lg) {
@include wrap(1, 3, $gutter);
flex-direction: column;
height: auto;
text-align: center;
}
@include at(xl) {
@include wrap(1, 4, $gutter);
}
}
}
.team {
@include team;
}