@use '../../utils' as *;

/*----------------------------------------*/
/* 7.12 Team  
/*----------------------------------------*/

.vl-team-wrap-inner{
    &-thumb{
        & img{
            height: 440px;
            object-fit: cover;
            border-radius: 20px;
            background: #ddd;
            @media #{$md,$xs}{
                height: 100%;
            }
        }
    }
    &-content{
        border-radius: 15px;
        background: var(--vl-white);
        padding: 24px;
        position: absolute;
        bottom: 20px;
        left: 50px;
        right: 50px;
        & .title{
            font-size: 20px;
            line-height: 20px;
            font-weight: 600;
            font-family: var(--vl-fonts-figtree);
            transition: .3s;
            margin-bottom: 12px;
            color: var(--vl-text-47);
            &:hover{
                color: var(--vl-heading-color);
                transition: .3s;
            }
        }
        & .desc{
            font-size: 16px;
            font-weight: 500;
            line-height: 16px;
            transition: .3s;
            color: var(--vl-text-48);
        }
    }
}


.vl-team-social-plus{
    position: absolute;
    top: -50%;
    transform: translateY(50%);
    @media #{$md,$xs}{
        left: 5px;
    }
    & span{
        height: 52px;
        width: 52px;
        line-height: 52px;
        background:var(--vl-theme-color);
        display: inline-block;
        color: var(--vl-white);
        transition: .3s;
        text-align: center;
        border-radius: 50px;
        font-size: 20px;
    }
}


.vl-team-social-inner{
    & ul{
        & li{
            display: inline-block;
            & a{
                & span{
                    height: 48px;
                    width: 48px;
                    line-height: 48px;
                    border-radius: 50px;
                    display: inline-block;
                    color: var(--vl-text-47);
                    transition: .3s;
                    background: var(--vl-white);
                    text-align: center;
                    font-size: 20px;
                    margin-bottom: 10px;
                    &:hover{
                        background: var(--vl-theme-color);
                        transition: .3s;
                        color: var(--vl-white);
                    }
                }
            }
        }
    }
}

.vl-team-social-inner ul li {
    display: grid;
    position: absolute;
    top: 0;
}

.vl-team-social-inner {
    position: absolute;
    top: -80px;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
}

.vl-team-wrap-inner:hover .vl-team-social-inner{
    top: -200px;
    opacity: 1;
    visibility: visible;
    transition: .3s;
}