.bio-container .bio-image { cursor: pointer; position: relative; width: 100%; margin-bottom: 16px; }
.bio-container .bio-image img { width: 100%; height: auto; object-fit: cover; display: block; }
.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; padding: 24px; background-color: #fff; position: relative; cursor: default; }
.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 (min-width:780px) {
  .bio-container .bio-image { height: auto; }
  .bio-container .bio-popup .wrapper { max-width: 622px; }
}