#our-team {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    
    border-top: var(--absolute-pixel-size) solid rgb(240, 240, 240);
    
    width: 100%;
    height: auto;
    padding: var(--fixed-content-padding) var(--page-content-padding);
    gap: var(--base-page-size);
}

#our-team > .members {
    position: relative;
    overflow: hidden;
    width: 100vw;
    height: calc(var(--base-page-size) * 35);
    margin-left: calc(var(--page-content-padding) * -1);
    margin-top: calc(var(--base-page-size) * 5);
}

#our-team > .members::after,
#our-team > .members::before {
    content: "";
    position: absolute;
    pointer-events: none;
    
    top: 0;
    
    width: var(--page-content-padding);
    height: 100%;
    z-index: 16;
}

#our-team > .members::after {
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    left: 0;
}

#our-team > .members::before {
    background: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    right: 0;
}

#our-team > .members > .drag-component {
    position: absolute;
    
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    
    overflow: hidden;
    
    top: 0;
    left: 0;
    cursor: pointer;
    
    width: 100vw;
    height: 100%;
    padding: 0 var(--page-content-padding);
    gap: calc(var(--base-page-size) * 5);
}

#our-team > .members > .drag-component > .member {
    background: transparent;
    
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    
    flex-shrink: 0;
    flex-grow: 0;
    
    border: none;
    border-radius: 0;
    
    width: calc(var(--base-page-size) * 22.5);
    height: 100%;
    gap: calc(var(--base-page-size) * 0.75);
}

#our-team > .members > .drag-component > .member:nth-child(odd) {
    justify-content: flex-start;
}

#our-team > .members > .drag-component > .member:nth-child(even) {
    justify-content: flex-end;
}

#our-team > .members > .drag-component > .member > .profile {
    filter: saturate(0);
    background: rgb(250, 250, 250);
    border-radius: calc(var(--base-page-size) * 11.25);
    
    width: calc(var(--base-page-size) * 22.5);
    height: calc(var(--base-page-size) * 22.5);
    
    transition: filter var(--transition-medium);
}

#our-team > .members > .drag-component > .member:hover > .profile {
    filter: saturate(1) brightness(0.975);
}

#our-team > .members > .drag-component > .member > .name {
    color: rgb(0, 0, 0);
    font-weight: var(--font-weight-medium);
    font-size: calc(var(--base-page-size) * 1.75);
    letter-spacing: calc(var(--base-page-size) * var(--base-page-letter-spacing) * 1.75);
    line-height: calc(var(--base-page-size) * 1.75);
    margin-top: var(--base-page-size);
}

#our-team > .members > .drag-component > .member > .role {
    opacity: 0.5;
    color: rgb(0, 0, 0);
    font-weight: var(--font-weight-regular);
    font-size: calc(var(--base-page-size) * 1.175);
    letter-spacing: calc(var(--base-page-size) * var(--base-page-letter-spacing) * 1.175);
    line-height: calc(var(--base-page-size) * 1.175);
}