На дестктопе это вертикальные вкладки (vertical tabs), на мобильном разрешении уже аккордеон. У них структура разметки разная. Можно изначально сверстать табы и добавить скрытые кнопки для аккордеона. Скриптом менять видимость триггеров для разных разрешений. Если загуглить tabs to accordion, то выдаст возможные варианты решения.
Может потому что у него position: absolute;? И его положение определяет margin-top: 50%;. margin в процентах рассчитывается от ширины родителя — в данном случае от ширины body. Какой в этом сакральный смысл?
Хотя бы у бутстрапа посмотрите, как работает dropdown меню https://getbootstrap.com/docs/5.3/components/navbar/
У вас оно раскрывается только при клике на стрелку и клик должен отрабатывать на button или элемент с role="button", но никак не на обычный span с иконкой
Фиксированные width и height убирайте
Шрифт один подключен локально с одним только форматом ttf, второй - через гугл фонтс.
Изображения 3 штуки по 500kB и одно больше мегабайта.
Вообщем рано выставили сайт на оценку. Там косяк на косяке. Все находить и объяснять никто не будет.
