Eugene Chefranov

Открыв сам normalize.css вы увидите к чему применяются стили

<div class="container">
<div class="header-holder">
Здесь твои три блока
</div>
</div>

.header-holder {
display: flex;
justify-content: space-between;
align-items: center;
}

.menu li {border-right: 1px solid #000;}
.menu li:last-child {border: none;}

В вашей предыдущей теме вы сами написали, что вам надо создать контейнер с свойством флекс внутрь которого засунуть два дива - один для фото, а другой для аккордеона

P.S. в классе .half у вас свойство inline-block и align-items, второе свойство работать не будет, так как относится к флексам которых у вас нет.

Верстайте сам слайд как хочется, а в качестве слайдера используйте Slick.
На чистом CSS такое затруднительно сделать и возможно будут проблемы с кроссбразерностью

Вы это имеете ввиду?
https://developer.mozilla.org/en-US/docs/Web/CSS/ratio
https://www.w3schools.com/howto/howto_css_aspect_r...

Попробуйте поиграть с touch-action https://developer.mozilla.org/ru/docs/Web/CSS/touc...

Не работает потому, что браузер во втором случае не проверяет правильность заполнения поля

Отсюда удалите

input:focus~label,
input:valid~label {
  top: -20px;
  font-size: 14px;
  color: #5264AE;
}

вот это
,input:valid~label

Получится такое

input:focus~label {
  top: -20px;
  font-size: 14px;
  color: #5264AE;
}

.project.first-project img {max-width: 100%; text-align: center;}

если правильно вас понял

w3.org.ua/jquery/jquery-pishem-akkordeon-s-primene...
здесь простой разбор аккордеона

Выберите три слайда для показа, включите centerMode, и с помощью margin вытесните крайние слайды за границу.

Slick Slider через Center Mode

Есть перевод неплохого мануала по модальным окнам prgssr.ru/development/oformlenie-modalnyh-okon.html и там обсуждается данная проблема