.team-item {
position: relative;
display: block;
text-decoration: none;
}
.team-item:hover .team-item-social {
transform: translate(-50%, -0.875rem);
opacity: 1;
visibility: visible;
}
.team-item:hover .team-item-social.team-item-social-relative {
transform: none;
}
.mobile .team-item-social, .tablet .team-item-social {
transform: translate(-50%, -0.875rem);
opacity: 1;
visibility: visible;
}
.team-item-img {
position: relative;
background-color: var(--background-secondary-color);
}
.team-item-img img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.team-item-heading {
line-height: 1.4;
margin-bottom: 0.125rem;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.team-item-heading.team-item-heading-large {
font-size: 1.375rem;
margin-bottom: 0.25rem;
}
.sidebar-item .team-item-heading {
margin-bottom: 0.125rem;
}
.sidebar-item .team-item-heading.team-item-heading-large {
margin-bottom: 0.25rem;
}
.team-item-info {
position: relative;
text-align: center;
padding: 1.5rem 1rem 1rem;
}
.team-item-position {
color: var(--text-secondary);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-size: 1rem;
}
.main-visible .team-item-social {
transition: all 0.2s;
}
.main-visible .team-item-social li a {
transition: background-color 0.2s, fill 0.2s;
}
.team-item-social {
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%, -1.75rem);
display: flex;
list-style: none;
margin: 0;
padding: 0;
opacity: 0;
visibility: hidden;
}
.team-item-social.team-item-social-relative {
position: relative;
left: 0;
top: 0;
transform: none;
opacity: 1;
visibility: visible;
margin-top: 1rem;
justify-content: center;
}
.team-item-social li {
margin-right: 0.375rem;
}
.team-item-social li:last-child {
margin-right: 0;
}
.team-item-social li a {
display: flex;
width: 1.75rem;
height: 1.75rem;
border-radius: var(--el-border-radius-min);
background-color: var(--accent-color);
fill: var(--background-color);
border: 1px solid var(--accent-color);
transition: none;
}
.team-item-social li a > svg {
display: block;
width: 0.875rem;
height: 0.875rem;
margin: auto;
}
.team-item-social li a:hover {
background-color: transparent;
fill: var(--accent-color);
}
.team-item2 .team-item-info {
padding: 1rem 1rem 0 1rem;
}
@media (max-width: 991.98px) {
.team-item-heading.team-item-heading-large {
font-size: 1.125rem;
margin-bottom: 0.125rem;
}
}
@media (max-width: 575.98px) {
.team-item {
max-width: 16.875rem;
margin: 0 auto;
}
}