.member {}
.member > .avatar {
	position: relative;
	overflow: hidden;
}
.member > .avatar:before {
	content: '';
	display: block;
	padding-top: 100%;
}
.member > .avatar > img {
	position: absolute; top: 0; left: 0;
	display: block; width: 100%; height: 100%;
	object-fit: cover;
	object-position: center;
}
.member > .info {}
.member > .info > .name { font-size: 20px; }
.member > .info > .name > span { display: block; }
.member > .info > .name > .firstname {
	font-weight: 400;
	color: var(--off-color);
}
.member > .info > .name > .lastname {
	text-transform: uppercase;
	font-weight: 700;
}
.member > .info > .roles { font-size: 18px; }
.member > .info > .roles > .role { display: block; }

@media (min-width: 1300px)							 { .member > .avatar { border-radius: 15px; } }
@media (max-width: 1299.99px) and (min-width: 900px) { .member > .avatar { border-radius: 15px; } }
@media (max-width:  899.99px) and (min-width: 450px) { .member > .avatar { border-radius: 7.5px; } }
@media (max-width:  449.99px)						 { .member > .avatar { border-radius: 7.5px; } }