@media screen and ( min-width: 1601px ) {
    :root
    {
        --angercode-teamslider-card-width: 400px;
        --angercode-teamslider-card-count: 3;
        --swiper-navigation-size: 20px!important;
    }
}

@media screen and ( max-width: 1600px ) {
    :root
    {
        --angercode-teamslider-card-width: 25vw;
        --angercode-teamslider-card-count: 3;
        --swiper-navigation-size: 20px!important;
    }
}

@media screen and ( max-width: 800px ) {
    :root
    {
        --angercode-teamslider-card-width: 40vw;
        --angercode-teamslider-card-count: 2;
        --swiper-navigation-size: 20px!important;
    }
}

@media screen and ( max-width: 500px ) {
    :root
    {
        --angercode-teamslider-card-width: 60vw;
        --angercode-teamslider-card-count: 1;
        --swiper-navigation-size: 20px!important;
    }
}

div.angercode-teamslider
{
    position: relative;
    box-sizing: border-box;
    min-height: 75px;
    height: fit-content;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 40px auto!important;
    padding: 40px 0!important;
    justify-content: flex-start;
    overflow: hidden;
    
    .swipeable
    {
        
        max-width: 100%;
        width: 100%;
        height: fit-content;
        padding:40px 40px;
        
        .wrapper
        {
            position: relative;
            top: 0;
            display: flex;
            flex-direction: row;
            max-height: fit-content;
            padding: 20px 0;
            
            .teamslider-slide
            {
                display: flex;
                justify-content: flex-start;
                height: auto;
                border-radius: 12px;
                overflow: hidden;
                user-select: none;
                
                .card
                {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    padding: 20px;
                    box-shadow: rgba(134, 134, 134, 0.16) 0 6px 24px;
                    background-color: rgb(255, 255, 255);
                    
                    .image-wrapper {
                        width: 100%;
                        aspect-ratio: .8;
                        border-radius: 6px;
                        overflow: hidden;
                    }
                    
                    .card-content {
                        margin: 20px 0 0 0;
                        
                        .text {
                            
                            line-height: 25px;
                            margin: 0;
                            text-align: center;
                            
                            &.name {
                                font-weight: bold;
                                font-size: 1.2em;
                                margin: 0 0 10px 0;
                            }
                            &.position {
                                font-weight: bold;
                                font-size: 1em;
                                color: #2c2c2c;
                                margin: 0 0 20px 0;
                            }
                            &.testimonial {
                                font-size: .8em;
                                color: #2c2c2c;
                            }
                        }
                        
                    }
                    
                }
            }
        }
    }
    
}

div.angercode-teamslider-fades
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    pointer-events: none;
    
    &:before,
    &:after {
        position: absolute;
        content: "";
        top: 0;
        bottom: 0;
        width: 50px;
        /*background: var( --steinmetz-light-background );*/
        z-index: 7;
        pointer-events: none;
    }
    
    &:before {
        left: 0;
        background: linear-gradient(90deg,rgba(250, 249, 246, 1) 0%, rgba(250, 249, 246, 0) 100%)
    }
    &:after {
        right: 0;
        background: linear-gradient(270deg,rgba(250, 249, 246, 1) 0%, rgba(250, 249, 246, 0) 100%)
    }
}

.swiper-slide-duplicate {
    position: absolute;
    &:last-child
    {
        left: 500%;
    }
}

.swiper-button-next,
.swiper-button-prev
{
    width: 50px!important;
    height: 50px!important;
    border-radius: 25px!important;
    padding: 20px;
    background-color: var(--steinmetz-light-background)!important;
    color: var(--steinmetz-design-color-main)!important;
    transition: var(--steinmetz-default-transition);
    &:hover {
        box-shadow: 0 0 2px 2px #2c2c2c;
    }
}

.swiper-pagination-bullet-active
{
    background: var(--steinmetz-design-color-main)!important;
}

.swiper-scrollbar
{
    bottom: -20px!important;
}
.swiper-scrollbar-drag
{
    background-color: var(--steinmetz-design-color-main)!important;
}