.people-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0px;
}

#people-block {
    margin: 0 -45px;
    z-index: 5;
}

.person-item-half {
    width: 50%;
}

.person-item-wide {
    width: 66%;
}   

.person-stack {
    width: 34%;
}

.person-headshot {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.person-item-wide .person-headshot {
    height: calc(100% + 1px);
}


.person-item-inner {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 70%;
}

.person-stack .person-item-inner {
    padding-bottom: 68%;
}

.person-details-box {
    position:absolute;
    bottom:0;
    padding: 20px 25px;
    background:rgba(255,255,255,.75);
    width:475px;
    max-width: 100%;
    transition: all .5s ease;
    z-index: 2;
}

.person-item-wide .person-details-box {
    bottom: -1px;
}

.person-details-box.left {
    left: 0;
}

.person-details-box.right {
    right: 0;
}

.person-chevron {
    position: absolute;
  right: 25px;
  top: 45px;
}
.person-chevron:hover { cursor: pointer;}
.person-chevron svg {
    width: 22px;
    height: 22px;
    transform: translate(0,-50%) rotate(90deg);
    transition: all .5s ease;
}

.person-details-box.active .person-chevron svg {
    transform: translate(0,-50%) rotate(0deg);
}

.person-bio {
    position: absolute;
  left: 0;
  width: 100%;
  background: rgba(255,255,255,.75);
  top: 100%;
  padding: 0 25px 20px;
  font-size: 16px;
  transition: all .5s ease;
  z-index: 4; /* Higher than shade overlay */
}

.person-active-bg { background: rgba(255,255,255,1);}

/* Ensure active person bio has full opacity background */
.person-bio.person-active-bg {
    background: rgba(255,255,255,1);
}

/* Raise active person above other flex items */
.person-item-half.person-active,
.person-item-wide.person-active,
.person-item-vert.person-active {
    position: relative;
    z-index: 10; /* Higher than any other person item */
}

/* Shading for inactive people when someone is active */
.people-container.has-active .person-item-half:not(.person-active),
.people-container.has-active .person-item-wide:not(.person-active),
.people-container.has-active .person-item-vert:not(.person-active) {
    position: relative;
}

.people-container.has-active .person-item-half:not(.person-active) .person-item-inner::after,
.people-container.has-active .person-item-wide:not(.person-active) .person-item-inner::after,
.people-container.has-active .person-item-vert:not(.person-active) .person-item-inner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 3;
    transition: all 0.3s ease;
    pointer-events: none;
}

/* Make headshots clickable */
.person-headshot {
    cursor: pointer;
}

@media screen and (max-width: 980px) {
    .person-item-half, .person-item-wide, .person-stack { width: 100%; }
    .person-details-box { width: 100%; }
}