Как решить проблемы с текстовыми блоками и отступами в адаптивной верстке?

Question

[nepster-web]

Сталкнулся с одной проблемой при практики адаптивной верстки.
Собственно есть блок, в нем 3 блока (реализованно с помощью display table, table-cell).
В боковых блоках текс, в блоке по центру картинка.

Моя попытка это сделать: jsfiddle.net/ow9m7h8q/2

Возникли следующие проблемы:
1) Если ресайзим как следует окно браузера, то из-за текста (а именно из-за слова SINHRONIZATION) правый блок всегда больше левого.

2) Не получается правильно применить vw, чтобы размер шрифта менялся не в зависимсоти от изменения рабочей области, а именно от изменения блока .description

3) Блоки слева не хотят сдвигаться (как в примере, справа)

Подскажите пожалуйста следующее:
1) Как можно поправить верстку, чтобы размер шрифта менялся в зависимсоти от изменения не всей области, а только родительского блока?

2) почему в случае с:

.projects .project .group:first-child aside{
    margin-right: -20px;
    border: solid 1px blue;
}

.projects .project .group:last-child aside{
    margin-left: -20px;
    border: solid 1px blue;
}

правые блоки сдвигаются, а левые нет ? Как это можно решить ?
(Задача необходима, так как в центре будет изображение, которое обладает тенью и содержимое блоков слева и справа необходимо немного подвинуть ближе к центру, тоесть чуть-чуть наложить на изображение).

Answer 1

[Александр Зеленин]

1) Для этого тебе нужно использовать LESS или своё решение на JS
2) margin-right: -20px; -> margin-left: 20px;