Есть несколько предложений.

* По структуре я так понимаю уклон в БЭМ, но в таком случае на элементы типа h2, input, a, figcaption, img, body, li я бы тоже повесил классы т.к в дальнейшем теги могут быть изменены и в итоге верстка в местах "полетит"



* Если контент в блоке можно менять и редактировать в визуальном редакторе(типа: WYSIWYG), к примеру через админку, то лучше всего создать класс и разместить его на уровень выше встраиваемого контента и стили внутри этого блока вешать уже не на классы (типа: .text-content .spanclass) а на теги (.text-content span или .text-content a итд) это упростит работу контент-менеджера с наполнением сайта и вероятность "сползания" верстки будет меньше.



* На активные элементы (типа: ссылка, выпадающие меню, кликабельный элемент итд) вешать стили указывающие на то что элемент активный, к примеру cursor: pointer; и там где уместно, при hover на элементе, можно вывести нижнее подчеркивание(к примеру через border) или слегка изменить цвет текста.



* Более плавная анимация, на главной странице есть блкои, при наведении происходит плавное появление контента, скрытие в идеальном случае тоже делать с плавное анимацией. В случае с классом .image можно сделать так: у body .conteiner main .main-content .image-wrap .image:hover .image-color - убираем transition а на body .conteiner main .main-content .image-wrap .image .image-color вешаем к примеру transition: opacity 500ms ease;



* По поводу transition: all; иногда не стоит использовать all(может в неожиданном месте замедлить рендер анимации) а лучше напрямую указать на что вешать анимацию, к примеру при hover хотим менять свойство opacity и color, а остальные не нужно задействовать, в таком случае можем написать: transition: color 500ms, opacity 300ms;

* В идеальном случае еще указывать вендорные свойства для поддержки старых браузеров (типа:-webkit-transition: top 1s ease-out 0.5s; -moz-transition: top 1s ease-out 0.5s; -o-transition: top 1s ease-out 0.5s; итд вот тут можно посмотреть подробнее http://htmlbook.ru/css)

* По поводу css, не стоит делать длинные пути(типа: body .conteiner header .header-logo) приоритет свойств в css строиться по нескольким принципам: по очереди, по более "конкретному" пути. К примеру: <div class="image-block"><img class="image active" src="#"></div>
.image {
display: none;
}

.image {
display: block; /*Сработает именно это свойство, т.к оно перезаписывает предыдущее*/
}

Вот другой пример:
.image.active {
display: none; /*Сработает именно это свойство, т.к в данном случае более конкретно указан "путь"*/
}

.image {
display: block;
}


* Еще было бы замечательно использовать boostrap сетку, т.к очень многие сайты используют этот тип сетки, он очень хорошо подходит для адаптивных сайтов, более подробно: https://bootstrap-4.ru/docs/4.0/layout/grid/


* Для удобства дальнейшего редактирования верстки не рекомендовал бы стили "подвязывать" на id элементов(типа: #menuannotation_1) лучше сделать 1 класс, к примеру .menuannotation и на него уже вешать все остальное т.е: .menuannotation:checked + .annotation { display: block; }


* Есть проблемы с мобильной версией, в плане модальных окон при клике на "annotation", блоки такого типа(всплывающие поверх обычного контента) лучше всего центровать используя position: fixed; дабы пользователь всегда видел это окошко пока не закроет.


* Порекомендовал бы посмотреть в сторону сборщиков, к примеру вот не плохая статья: https://pugofka.com/blog/technology/the-prepared-starting-package-front-end-development-on-gulp/ и вот https://habr.com/ru/post/250569/
Очень может помочь в дальнейшем, как для собственного удобства так и при работе в команде верстальщиков