смотря по какой методологии верстаешь. к примеру у https://ru.bem.info/ также. у каждого элемента должен быть класс и в ксс не должно быть обращений к тегу. только к классу.
ну тк объеденяй. в чем проблема? 2 библиотеки подключить не можешь чтоли?
p.s. вместо lightGallery советую fancybox. благо 3 часть вышла fancyapps.com/fancybox/3
1)задай для изображения float: left; а для текста margin-left на величику изображения.
2) родителю overflow: hidden; и margin-bottom сколько хочешь для отступа вниз.
изначально в dom располагай элементы так как ты хочешь видеть их на мобильном. а на декстопе уже двигай их влево и вправо. к примеру через position: relative; https://jsfiddle.net/t0ecjokn/
Некоторые люди на сайтах пишут, что "семантический код занимает меньше места".
тк они для того и создавались чтобы ты классы не задавал. правильно будет сравнивать так: <header></header> || <div class="header"></div>
p.s. и не приплетай сюда БЭМ. это вообще из другого разряда
1) через svg - там собственно так и сделано.
2) если не силен в svg - накладываешь на картинку через absolute блоки, которые крутишь через transform rotate, и иногда используешься transform skew. и просто при ховере их подсвечиваешь.
как вариант картинку разделитель засунуть в один из li и стилизовать. тобишь у тебя идут ul>li - тот li который для картинки - задаешь класс и стилизуешь как тебе угодно.
у тебя 4 col-md-6 элемента. которые float left; так не должно быть. либо задавай им отдельный row. либо ставь clearfix.
через clearfix - так https://jsfiddle.net/f8rtwxe9/3/