Геннадий

Уберите visibility: hidden из класса modal

.modal {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgb(0, 0, 0, .8);
    z-index: 2;
}

Во-первых, нужно проверять подключение стилей. Убедиться, что файл действительно подгружается. В данном случае style.css должен находиться в той же директории, что сама страница, где подключается файл.
<link rel="stylesheet" href="style.css">
Во-вторых, проверить кеширование стилей. Браузер попросту мог закешировать файл стилей до внесения изменений в него.

ol {
    margin-left:20px;
    padding: 0;
}

Результат:

Посмотрите стили вашей картинки. Явно, что проблемы из-за неё:

.img img{
width: 650px;
}

При том, что на скрине, ширина экрана у вас 375px и для остальных элементов у вас установлена процентовка.
То есть, вы задаете ширину 100% для класса .img (при media), но при этом в общем указываете ширину 650px для тега img

.img img{
width: 650px;

img 650px.
.img{
width: 100%;
margin: 0;
padding: 0;
}
}

Можно через js (jquery):
$(selector).hover(inFunction,outFunction);
https://www.w3schools.com/jquery/event_hover.asp

Можно через псевдокласс :hover в css:
htmlbook.ru/css/hover