Алмаз Бисенбаев

Смотря в чем именно проблема. Тайтл совсем нельзя оборачивать ни в какой тег или нельзя именно в DIV? Если второй вариант, то без проблем юзаешь SPAN или что угодно и даешь display: block;

Если совсем нельзя юзать теги, то стилизуешь сам <a>, а отступы имитируешь, задав margin-bottom для картинки

Пересохрани в UTF-8, может слетела кодировка

align-items делаешь stretch, а саму картинку высотой 100%, растяжение картинки исправляешь добавлением object-fit:cover;

Раз уже нельзя юзать флексы, то хотя бы вот так: codepen.io/adamkaulitz/pen/EZjqvg
Дальше сам разберешься

Узнай класс изображения в лайтбоксе и задай ему:

width: auto!important;
height: auto!important;

Че зря пердолиться-то

Че париться, просто добавь в самом начале

* {
   margin: 0;
   padding: 0;
}

Потому что "~" видит только тех сиблингов, которые находятся ниже первого. В CSS нет возможности выбрать сиблинга, стоящего выше, но есть различные лайфхаки. Хотя проще прибегнуть к js.

Теги select и option можно стилизовать через CSS. + еще есть полезный тег "label".

При позиционировании бэкграунда сначала указывается положение по горизонтали, а потом уже по вертикали. Т.е. у тебя должно быть не "0% 100%", а "100% 0%".

Юзай фиксированный width, а не max-width

Что если всунуть маркеры как отдельные flex-элементы с помощью :before/:after