// MEMBERS
.members{

    @include desktop{

        .col:nth-of-type(even){
            transform: translateY(3rem)
        }
    }
}

.member{
    position: relative; // for .member__more
    height: 100%;
    background: $grey--light;
}

.member__image{
    overflow: hidden;
    position: relative;
    height: 15rem;

    img{
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;

    }

    @include desktop{

        img{
            height: calc(100% + 0.75rem);
            transform: translate3d(0, -0.75rem, 0);
            transition: transform 0.45s $easing--medium;
        }
    }
}
@include desktop{

    .member:hover .member__image img{
        transform: translate3d(0, 0, 0);
    }
}

.member__details{
    z-index: 1; // lower than .member__more div
    position: relative;
    padding: 1.5rem;
    background: $main;

    // fill animation
    &:after{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: $grey--dark;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.45s $easing--medium;
    }
}
@include desktop{

    .member:hover .member__details:after{
        transform-origin: left;
        transform: scaleX(1);
    }
}
.member__title{
    z-index: 2;
    position: relative;
    margin-top: 0;
    color: white;

    @include desktop{
        transition: color 0.45s $easing--medium;
    }
}
@include desktop{

    .member:hover .member__title{
        color: lighten($main, 20%);
    }
}
.member__position{
    z-index: 2;
    position: relative;
    margin-top: 0;
    color: white;
}

.member__nav{
    padding: 1.5rem;

    ul{
        // reset list style
        margin: 0;
        padding: 0;
        list-style: none;
    }
    a{
        display: block;
        font-size: 0.875rem;
        padding-left: 1.5rem;
        background-size: 1rem 1rem;
        background-position: top 0.25rem left;
        background-repeat: no-repeat;
    }
    // contains "mailto:"
    a[href*="mailto:"] {
        background-image: url('../icons/icon-href__email.svg');
        // break words at any character
        word-break: break-all;
    }
    // contains "linkedin.com"
    a[href*="linkedin.com"] {
        background-image: url('../icons/icon-href__linkedin.svg');
    }

    @include desktop{

        a:hover{
            text-decoration: underline;
        }
    }
}
.member__more{
    font-size: 0.875rem;

    // reset first paragraph lead
    .the-content p:first-of-type {
        font-size: inherit;
    }

    @include mobile{
        margin-top: 1.5rem;

        span{
            display: none;
        }
    }

    @include desktop{

        span{
            display: block;
            padding-left: 1.5rem;
            color: $main;
            background-image: url('../icons/icon-href__bio.svg');
            background-size: 1rem 1rem;
            background-position: center left;
            background-repeat: no-repeat;
        }

        div{
            // hide
            visibility: hidden;
            opacity: 0;
            @include transition;

            overflow-y: auto;
            z-index: 2;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            padding: 1.5rem;
            color: white;
            background: linear-gradient(45deg, adjust-hue($main, -20%), adjust-hue($main, 20%));

            // custom scrollbar
            &::-webkit-scrollbar {
                width: 0.75rem;
            }
            &::-webkit-scrollbar-track {
                background: darken($main, 10%);
            }
            &::-webkit-scrollbar-thumb {
                background: lighten($main, 10%);
            }
        }

        &:hover div{
            visibility: visible;
            opacity: 1;
        }
    }
}