FeST1VaL

Скорее всего вы это имели ввиду, то проблема тута:

.form {
 position: absolute;
}

Поменять на relative

input - display: inline-block;
Если между ними в верстке поставить пробел, то появляется между ними пару пикселей которые как раз мешают)
Решения тут по сути 3)

1. Сделать flex/grid
2. Задать font-size: 0;
3. Убрать пробел между input

1. У вас отсутствует глиф скорее всего на букве E и используется Times New Roman.
2. Я не вижу никакого Lora шрифта)
3. Большая часть вообще Arial
4. Большое кол-во шрифтов это плохо, темболее не стандартных

Решение: попробовать поискать этот шрифт еще где нить... вдруг там будет буква E... но не верю в это))

Если правильно понял, то как то так:



Выучите флексы, они не так уж сложны.
И вы же наверняка могли использовать просто Bootstrap...

Есть неплохая прога для оптимизации, использует множество способов оптимизации без потери качества. Ну и так же если у вас картинка без прозрачности, то лучше же сделать jpg) еще один тупой вариант оптимизации)

FileOptimizer

Так у вас крошки absolute... зачем им такое позиционирование? тут проблема в адаптиве... а не телефоне

У Owl есть события изменения текущего слайда, можно дописать callback на изменение и самому навешивать active в зависимости от индекса текущего слайда.

Так вы делаете media.play(), но при этом у вас в media хранится только последний элемент...

Навешивайте события клика по кнопкам в цикле где вы задаете переменную media... Короче говоря я бы переписал полностью... Делал бы цикл по видеозаписям и брал бы паррент т.е класс media-wrapper и в нем уже искал кнопки и после навешивал бы на найденные кнопки события... как то так... лень писать код... ;3 Думаю суть передал...