.bio-container .bio-image{cursor:pointer;position:relative;width:100%;height:312px;margin-bottom:16px;}
.bio-container .bio-image img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1);}
.bio-container .bio-image::before{font-weight:500;color:#fff;position:absolute;z-index:1;inset:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;opacity:0;content:"View [+]";background-color:rgba(0,0,0,0.3);transition:all 0.25s ease;}
.bio-container .bio-image:hover::before{opacity:1;}
.bio-container .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-container .bio-popup .wrapper{width:calc(100% - 32px);max-width:350px;max-height:98vh;margin-top:52px;padding:24px;background-color:#fff;position:relative;cursor:default;}
.bio-container .bio-popup .wrapper .name{line-height: 1;margin-bottom:8px;}
.bio-container .bio-popup .close{position:absolute;top:0;right:0;padding:16px;cursor:pointer;}
.bio-container.active .bio-popup{visibility:visible;opacity:1;pointer-events:all;}
@media screen and (max-width: 1024px) {
    .bio-container .bio-popup .wrapper {
        overflow-y: scroll;
    }
  }
@media screen and (min-width:780px){
  .bio-container .bio-image{height:384px;}
  .bio-container .bio-popup .wrapper{max-width:622px;}
}