Teamslider

Onze teamleden

Header

Description….

				
					/*****************/
/** TEAM SLIDER **/
/*****************/

.teamslider {
    
    &__slider {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;

        > div {
            padding: var(--space-xs);
            cursor: pointer;
            
            &.active figure,
            &:hover figure { 
                filter: grayscale(0);
            }
            
            figure {
                aspect-ratio: 1/1;
                width: 120px;
                height: 120px;
                overflow: hidden;
                border-radius: 50%;
                filter: grayscale(100%);
                transition: .2s;
    
                img {
                    object-fit: cover;
                    object-position: center center;
                    width: 120px;
                    height: 120px;
                }
            }
        }
    }
    
    &__detailcontainer {
        background: var(--color-secondary);
    }
    
    &__detail {

        img {
            transform: translateX(-50px);    
            opacity: 0;
            transition: 1s;
            transition-delay: .5s;
        }
        
        .slick-current img {
            transform: translateX(0);    
            opacity: 1;
        }
    }

}