.bio-item{margin-bottom:24px;}
.bio-item .name{color:#011e36;font-weight:500;}
.bio-item .bio-image{cursor:pointer;position:relative;width:100%;height:auto;margin-bottom:16px;}
.bio-item .bio-image img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;aspect-ratio:4 / 5;}
.bio-item .bio-image .expand{color:#bd1010;background-color:#fff;border-radius:20px;display:flex;font-size:16px;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;position:absolute;width:30px;height:30px;padding:10px;right:16px;bottom:16px;transition:all 0.25s ease-in-out;overflow:hidden;}
.bio-item .bio-image .expand i{font-weight:400;font-size:16px;}
.bio-item .bio-image .expand span{width:0;transition:all 0.25s ease-in-out;overflow:hidden;font-size:16px;}
.bio-item .bio-image:hover .expand{background-color:#bd1010;color:#ffffff;width:100px;}
.bio-item .bio-image:hover .expand span{width:100%;padding-left:12px;}
.bio-item .bio-image:before{content:"";background-color:#000;opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;transition:all 0.25s ease-in-out;}
.bio-item .bio-image:hover::before{opacity:0.25;}
.bio-item .bio-popup{visibility:hidden;opacity:0;pointer-events:none;position:fixed;inset:0;z-index:99;background-color:rgba(0,0,0,0.6);display:flex;justify-content:center;align-items:center;transition:all 0.3s ease;user-select:none;cursor:pointer;}
.bio-item .bio-popup .wrapper{width:calc(100% - 40px);max-width:1100px;max-height:90vh;padding:48px;background-color:#ffffff;position:relative;cursor:default;overflow:auto;}

/*.bio-item .bio-popup .wrapper .grid { height: calc(100vh - 188px); }*/
.bio-item .bio-popup .wrapper .content{overflow-y:auto;}
.bio-item .bio-popup .close{position:absolute;top:0;right:0;padding:16px;cursor:pointer;}
.bio-item.active .bio-popup{visibility:visible;opacity:1;pointer-events:all;}
@media screen and (max-width:1024px){
  .bio-item .bio-popup .wrapper{max-height:calc(100vh - 180px);}
  .bio-item .bio-popup .wrapper img{max-width:300px;width:100%;margin-bottom:16px;}
}
@media screen and (max-width:768px){
  .bio-item .bio-popup .wrapper .image{display:none;}
  .bio-item .bio-popup .wrapper{overflow:auto;}
  .bio-item .bio-popup .wrapper .grid{height:auto;}
}
@media screen and (max-width:380px){
  .bio-item .bio-image img{height:350px; object-position: 10% 10%;}
}