.member { position: relative; }
.member:before {
    content: '';
    display: block;
    padding-top: 145%;
}
.member:nth-child(3n + 1) { background-color: #1E1E1E; color: #FFF; }
.member:nth-child(3n + 2) { background-color: #FFF; }
.member:nth-child(3n + 0) { background-color: #EEE; }

/*-------------------------------------------------------------------------------------------------------------------------------*/

.member > .content {
    position: absolute; top: 30px; right: 30px; bottom: 50px; left: 30px;
}

/*-------------------------------------------------------------------------------------------------------------------------------*/

.member > .content > .avatar {
    position: relative;
    padding-top: 100%;
    margin-bottom: -25px;
    
    background-image: url("../../images/avatar.png");
    background-size: cover;
    background-position: center;
}
.member > .content > .avatar > img {
    position: absolute; top: 0; left: 0;
    display: block; height: 100%; width: 100%;
    
    object-fit: cover;
    object-position: center;
}
.member > .content > .contact {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 15px;
    margin-bottom: 25px;
}
.member > .content > .contact:empty { margin-bottom: 55px; }
.member > .content > .contact > a {
    position: relative;
    flex: 0 0 50px;
    
    background-color: var(--main-color);
    border-radius: 50%;
    filter: drop-shadow(0 0 10px rgba(0,0,0,.15));
    
    color: #000;
}
.member > .content > .contact > a {
    transition:
        background-color .2s ease-out,
        color            .2s ease-out;
}
.member > .content > .contact > a:hover {
    background-color: #000;
    color: #FFF;
}
.member > .content > .contact > a:before {
    content: '';
    display: block;
    padding-top: 100%;
}
.member > .content > .contact > a:after {
    content: '';
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    
    background-color: currentColor;
    
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 40% auto;
    mask-size: 40% auto;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    
    color: inherit;
}
.member > .content > .contact > .phone:after {
    -webkit-mask-image: url("../../images/icons/phone.svg");
    mask-image: url("../../images/icons/phone.svg");
}
.member > .content > .contact > .email:after {
    -webkit-mask-image: url("../../images/icons/mail.svg");
    mask-image: url("../../images/icons/mail.svg");
}
.member > .content > .contact > .linkedin:after {
    -webkit-mask-image: url("../../images/social/linkedin.svg");
    mask-image: url("../../images/social/linkedin.svg");
}
.member > .content > .name {
    line-height: 170%;
    font-size: 20px;
    font-weight: 700;
}
.member > .content > .job-title {
    font-size: 16px;
    font-weight: 300;
}