Угу.
Вы написали .arrow:hover .list__item
Т.е. нужно найти .list__item, который лежит в .arrow и применить стили когда hover на .arrow
Таких элементов нет, потому что .arrow вообще пустые.
Во-первых, имеет смысл ознакомится с соседними селекторами, которые записываются с помощью + и ~
Во-вторых, переделать структуру так, чтобы они смогли работать. Сейчас не смогут, потому что CSS не умеет наверх.
Либо переписать всё это на JS и на click. Всё таки для мобилок делаете.
И arrow это кнопки (button), а не span.
Danya Wyse, я понимаю, что для примера, но вы же видите, что он не там, где нужно.
Значит, начало проблемы очень далеко от картинки. Потому что картинка подстраивается под свою обертку. А та под свою и т. д.
Начните с того, чтобы красная рамка не выходила за экран, т.е. блок был нужного размера.
Можете поменять border на outline с отрицательным outline-offset.
Затем аналогично с внутренними блоками.
https://qna.habr.com/q/1086818