WapSter

создаешь блок абсолютно позиционируешь и задаешь z-index-1

Держи. Вот еще вариант на нормальном css без фигни

А ты импортировал нужные файлы в scss @import 'file'; в pug include file.pug? И очень желательно, в таких случаях заливать в репозиторий, чтобы хотя бы исходники можно было посмотреть.

Поиграй в игру найди отличия)

body {background: #000}
header {background: #fff}

Что бы это получилось нужно чтобы .col-left быль абсолютно позиционирован. Теория

Пример. Лучше не выбрасывать так код, а показывать в песочнице.

Есть свойство max-width используй его. Сочетается со свойством width

Держи код

Яндекс огромен, и они все соки высасывают из своей же методологии БЭМ. Цепляют модификаторы, так как обычный ховер не умеет изменять классы. А так различные причины могут быть, прицепить класс одна из них.

Держи

создайте еще одну обертку внутри слайда, что бы не нарушать стили слайдера, в ней:

display: flex;
align-items: center;

для блока с картинкой обязательно укажите min-width и марджином отодвиньте этот блок справа

много вариантов, но могу натолкнуть на мысль, верстаете изначально все линии, задаете им opacity: 0; transition: opacity 300ms; при выборе нужного элемента при помощи :hover или кодом js даете нужной лини opacity: 1;