$benefit-margin: 30 + common-sprite-height(benefits-developers);

.benefits {
    font-size: 0;
    margin-top: 130px;

    .benefit {
        font-size: 16px;
        line-height: 26px;
        color: #666;

        .title {
            font-size: 20px;
            line-height: 0.8;
            color: #333;
            letter-spacing: -1.4px;
            margin-bottom: 25px;
        }

        &:before {
            content: '';
            display: block;
            margin: 45px auto 0;
        }

        &.devs:before {
            margin-bottom: $benefit-margin - common-sprite-height(benefits-developers);
            @include common-sprite(benefits-developers, $dimensions: true);
        }

        &.ops:before {
            margin-bottom: $benefit-margin - common-sprite-height(benefits-operations);
            @include common-sprite(benefits-operations, $dimensions: true);
        }

        &.designers:before {
            margin-bottom: $benefit-margin - common-sprite-height(benefits-designers);
            @include common-sprite(benefits-designers, $dimensions: true);
        }

        &.pms{
            &:before {
                margin-bottom: $benefit-margin - common-sprite-height(benefits-project);
                @include common-sprite(benefits-project, $dimensions: true);
            }
        }
    }


/*benefits-designers.png  benefits-operations.png logo-small.png*/
/*arrow.png               benefits-developers.png benefits-project.png*/
}
