.members {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width:100%;
    gap:1em;
    justify-content: space-between;
    margin-top: clamp(1em,.75em + 1vw,1.5em);
}
.member {
    flex-basis: calc(33.33% - 1em);
    max-width: 24em;
}
.member:last-child {margin-right: 0;}
.member figure {
    position: relative;
    margin:0;
    overflow: hidden;
}


.member img {
    width:100%;
    height: auto;
    transition: transform .35s
}
.member:hover img {
    transform:scale3d(1.1,1.1,1.1)
}
.member figure button {
    display: flex;
    align-items: center;
    z-index: 1;
    position: absolute;
    bottom:0; right:0;
    width:100%;
    justify-content: center;
    color:white;
    border:none;
    cursor: pointer;
    padding: 1.125em 1.5em;
    background-color: #913E2CE0;
    text-transform: uppercase;
    font-weight: 550;
    font-size: clamp(.875rem, .5rem + .5vw, .9375rem);
    letter-spacing: .025em;
    transition: color .35s, background-color .35s;
}

.member figure button:hover {
    color:var(--mustard-color);
    background-color: var(--earth-color);
}
.member figure button:hover span.plus-sign::before,
.member figure button:hover span.plus-sign::after {
    background-color: var(--mustard-color);
}

span.plus-sign {
    opacity: 0;
    display: block;
    position: relative;
    width:0;
    height:12px;
    margin-left: .5em;
    overflow: hidden;
    transition: opacity .35s, .25s width;
}
.member figure button:hover .plus-sign {
    opacity:1;
    width:12px;
}

span.plus-sign::before, span.plus-sign::after {
    content:"";
    position: absolute;
    top: 50%;
    left:0; right:0;
    width:100%;
    height:2px;
    transform:translate3d(0,-50%,0);
    background-color: var(--mustard-color);
    transition: background-color .35s;
}
span.plus-sign::after {
    top:auto;
    left:50%; right:0;
    bottom:0;
    width:2px;
    height:100%;
    transform:translate3d(-50%,0,0);
}

.member-info {
    margin-top: 1.5em;
}

.member-info h3, #popup figcaption h3 {
    margin-bottom:.5em;
    color:var(--earth-color);
    font-weight: 600;
    font-size:clamp(1.25rem,1rem + .5vw, 1.425rem)
}
.member-info p, #popup figcaption p {
    margin: 0;
    margin-bottom: .25em;
    font-weight: 500;
    font-size: clamp(1rem, .5rem + .75vw, 1.05rem);
}

.member .social-links, .member-popup .social-links {
    margin-top: 1.5em;
    display: flex;
    align-items: center;
    gap: .5em;
}
.member .social-links a, .member-popup a {
    text-decoration: none;
    color:white;
    line-height: 0;
    display: inline-block;
    font-size: 1.25rem;
    padding:.625em;
    background-color: var(--earth-color);
    transition: .35s color ease, background-color .35s ease
}
.member-popup a {font-size: 1.125rem;}
.member a:hover {
    background-color:var(--mustard-color)
}

/* POPUP */
#popup_overlay {
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
    position: fixed;
    top:0; left:0; right:0;
    width:100vw;
    height:100vh;
    background: rgba(20,22,23,0.75);
    transition: opacity .5s ease, visibility .5s ease
}
#popup_overlay.active {
    opacity: 1;
    visibility: visible;
}
#popup {
    opacity: 0;
    display: flex;
    align-items: center;
    z-index: 1;
    position: fixed;
    top:50%; left:0; right:0;
    width:95vw;
    max-width: 60em;
    padding: clamp(2.5em, 2.5em + 3vw, 4em) clamp(1.5em,1.25em + 2vw, 3em);
    margin:0 auto;
    background:white;
    box-shadow: 2px 2px 30px hsla(0,0%,0%,.25);
    transform: translate3d(0,-45%,0);
    transition: opacity .35s ease, visibility .35s ease, transform .5s ease;
}
#popup.visible {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0,-50%,0);
}
.popup-container {
    width:100%
}
#popup .close, .close_fixed {
  visibility: visible;
  position: absolute;
  z-index: 2;
  right: calc(.75em + .25vw);
  top: calc(.75em + .25vw);
  width: 2.25em;
  height: 2.25em;
  padding: .25em;
  opacity: 0.7;
  cursor: pointer;
}
#popup .close {transition: opacity .35s ease}
#popup .close:hover {opacity: 1;}
#popup .close:before, #popup .close:after, .close_fixed:before, .close_fixed:after {
  position: absolute;
  left: 50%;
  top:50%;
  content: '';
  height: 70%;
  width: 2px;
  background-color: #6F6F6F;
}
#popup .close:before, .close_fixed:before {
  transform: translate3d(-50%,-50%,0) rotate(45deg);
}
#popup .close:after, .close_fixed:after {
  transform: translate3d(-50%,-50%,0) rotate(-45deg);
}
.close_fixed {display: none}

#popup figure {
    display: flex;
    align-items: center;
    flex-direction: row;
    margin:0;
    padding-bottom:2em
}
#popup figcaption {
    width: calc(60% - 7.5%);
    margin-left: 7.5%;
}

#popup figure img {
    max-width: 13em;
    width: 40%;
    height: auto;
    min-width: 10em;
    border-radius: 50%;
}

#popup .description {
  border-top: 2px solid var(--earth-color);
  padding: 1.5em .125em 0
}
#popup .description p {
    margin-top: 0;
    line-height: 2;
    font-size: clamp(.9375rem, .5rem + .5vw, 1rem);
}
#popup .description p:last-child {
    margin-bottom: 0;
}

@media only screen and (max-width: 64rem) {
    .member figure button {
        background-color: var(--earth-color);
    }
    .member figure button span.plus-sign::before,
    .member figure button span.plus-sign::after {
        background-color: var(--mustard-color);
    }
    
    span.plus-sign {
        opacity: 1;
        width:12px;
        height:12px;
    }

}

@media only screen and (max-width: 48rem) {
    .members {
        flex-direction: column;
    }
    .member, .member:last-child {
        margin: 0 auto;
        margin-bottom:2em;
        width:100%;
        max-width: 25em;
    }
}
@media only screen and (max-width: 40rem) {
    #popup .close {display: none;}
    .close_fixed {
        display: block;
        opacity: 0;
        visibility: hidden;
        z-index: 2;
        display: block;
        position: fixed;
        top:1em;
        right:1em;
        transition: opacity .25s,visibility .25s;
    }
    #popup_overlay.active .close_fixed {
        opacity: 1;
        visibility: visible;
    }
    #popup_overlay .close_fixed.remove {
        opacity: 0;
        visibility: hidden;
    }

    #popup.visible {
        transform:none
    }
    #popup {
        top:0;
        height:100%;
        width:100vw;
        overflow-y:scroll;
        transform:translate3d(0,-5%,0);
    }
}
@media only screen and (max-width: 30.25rem) {
    #popup {
        display: block;
        padding: clamp(6em, 2.5em + 3vw, 4em) clamp(1.5em,1.25em + 2vw, 3em) clamp(2em, 2em + 2vw, 3em);
    }
    #popup figure {
        flex-direction: column;
    }
    #popup figure img {
        width: 70%;
        margin-right: 0;
      }
    
    #popup figcaption {
        margin:0 auto;
        margin-top: 1.25em;
        text-align: center;
        width: 100%;
    }
    .member-popup .social-links {
        justify-content: center;
    }
}