Андрей Голуменов

Сделайте блок инлайн-блоком он автоматически ужмется по контенту. Либо Спозиционируйте блок абсолютно
display: inline-block;

Например так: codepen.io/golumenov/pen/GuKlH?editors=110
Ток иконку поменяйте сами)

Можно сделать как-то так:
codepen.io/golumenov/pen/sKFiq?editors=110
С шрифтами и размерами особо не заморачивался, подбирайте сами.

Примеры кода в студию. Ну или сходите к гадалкам

#blok3 и #blok2 не влезают в 320px

для начала предоставьте ссылку

Проще всего в фотошопе.
И что значит от краев к центру? В центре прозрачная по краям непрозрачная или наоборот? Я что-то запутался.
Фон под картинкой однотонный? Если да можно попробовать накинуть сверху градиентную заливку через :after

Можно сделать используя area и map, работает даже в старых браузерах

codepen.io/golumenov/pen/aHLoC
Ошибка в скрипте и в том, что вы в качестве css выбрали sass

<img style="float: right">
<p>Первый абзац</p>
<p>Второй абзац</p>
<p>Третий абзац</p>

Переместите картинку вправо. Не будет подвисших абзацев, текст будет обтекать картинку и не так бросаться в глаза

Из моего опыта: Одним списком дело не обойдется. Вам в любом случае придется формировать 3 списка, поскольку одним списком и средствами html+css такое сделать не получится.
Поэтому: Либо формируете 3 списка средствами php, либо отдаете на сайт один список и уже там формируете из этого списка 3 списка средствами javascript

Есть мнение, что назначение css стилей через #id работает в разы медленней, чем через .class и по этому лучше не использовать #id для задания стилей.

Самописный. Внимательнее можно посмотреть тут