ThunderCat

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

онховер.

цсс не подключил скорее всего.

https://tpverstak.ru/grid/
tpverstak.ru/flex-cheatsheet

<div style="background-image: url('/include/first.jpg');background-size:contain"></div>

Фигасе, оно еще и на друпале О.о
Похоже что это fullpage.js Carousel Marketing
если речь о верхнем "слайдере", то там вообще тупо имаж позишн по клику меняется...

@mediaи стили для изображения чем не устраивают?

Во первых базы хтмл бы выучить сначала, например то что стили обрамляются тегом style.
Во вторых цсс лежит ниже хтмл, соответственно работать вообще не должен.
в третьих не надо тупить, есть нормальные сервисы для работы с хтмл/жс, такие как jsfiddle, codepen, используйте их.

https://jsfiddle.net/qk0yf653/1/

flex же

background-position: top 0 right -301px;

Ты же все равно криво верстаешь, так возьми уже бутстрап и верстай хотя бы внешне нормально...

хм, див 50% бордер радиус позишн фиксед/абсолют, в зависимости от дизайна. Размер выставить в vw.

и у меня классы в основном mirror-ы мне их переименовывать под каждый раздел?

Вообще то классы называются не по разделу сайта, а по семантике разметки. Если все они отображают одинаково, различий в них нет, это один класс. Разделять классы по разделам товаров все равно что в автосалоне грузовики и легковушки сортировать по цвету.