.c-slider {
    width: 100%;
    background-repeat: no-repeat;
    
    @media ( min-width: $tablet + 1px ) {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    
    @media ( max-width: $tablet + px ) {
    	background-position: 10% 0;
    }
    
    .blue & {
        background-image: url(../img/slider/bg--blue.png);
    }
    
    .gray & {
        background-image: url(../img/slider/bg--gray.png);
    }
    
    .violet & {
        background-image: url(../img/slider/bg--violet.png);
    }

    .green & {
        &:before {
            content: '';
            position: absolute;
            top: -4.5rem;
            right: 0;
            width: 317px;
            height: 573px;
            background-image: url(../img/slider/bg--green.png);
            background-repeat: no-repeat;
            background-size: contain;
        }

        @media ( max-width: 1501 + px ) {
            left: 65%;
        }

        @media ( max-width: $tablet + px ) {
            left: 0;
            position: relative;
        }
    }
}