.so-widget-staff { display:grid; grid-auto-flow:dense; grid-template-columns:1fr 1fr 1fr 1fr; gap:60px; justify-content:center; }

.so-widget-staff .staff .wrapper { padding:30px; position:relative; text-align:center; transition:background-color 0.6s; }
.so-widget-staff .staff.active .wrapper { background-color:#f4f4f4; }
.so-widget-staff .staff .wrapper::after { content:''; width:0; height:0; border-left:18px solid transparent; border-right:18px solid transparent; border-top:18px solid #f4f4f4; opacity:0; position:absolute; top:100%; left:50%; margin-left:-18px; transition:opacity 0.6s; }
.so-widget-staff .staff.active .wrapper::after { opacity:1; }

.so-widget-staff .staff .image { margin-bottom:15px; }
.so-widget-staff .staff .image img { vertical-align:bottom; }

.so-widget-staff .staff .name { color:#07233d; font-size:24px; font-weight:700; line-height:1; }

.so-widget-staff .staff .title { font-size:16px; font-style:italic; margin-bottom:6px; }

.so-widget-staff .staff ul { font-size:0; list-style-type:none; margin-bottom:0; padding-left:0; }
.so-widget-staff .staff ul li { border-right:1px solid #ddd; display:inline; font-size:16px; margin-right:15px; padding-right:15px; }
.so-widget-staff .staff ul li:last-child { border-right-width:0; margin-right:0; padding-right:0; }

.so-widget-staff .bio { background-color:#07233d; color:#fff; display:none; grid-column:1 / -1; padding:60px; }

.so-widget-staff .bio .name { font-size:30px; font-weight:700; line-height:1; margin-bottom:15px; }

@media (max-width:991px) {
	.so-widget-staff { grid-template-columns:1fr 1fr 1fr; }
}

@media (max-width:767px) {
	.so-widget-staff { grid-template-columns:1fr 1fr; gap:30px; }

	.so-widget-staff .bio { padding:45px; }
}

@media (max-width:575px) {
	.so-widget-staff { grid-template-columns:1fr; }
}