Zhenya Tureysky

Версия с анимацией запутывает, могу с нуля сделать

У вас сетка (grid) не спроектирована. Посмотрите пример сетки на flexbox , допустим у того же bootstrap getbootstrap.com
Адаптивная сетка создается на media-запросах https://developer.mozilla.org/ru/docs/Web/CSS/@media

Пока не будет ограничений по сетке, все будет "плавать"

Первое что бросилось в глаза. Вы жестко ограничиваете ширину контэйнера:

.container {
  margin: 0 auto;
  width: 1150px;
}

Попробуйте так, должно стать гораздо лучше:

.container {
  margin: 0 auto;
  max-width: 1150px;
  width: 100%;
}

Далее вместо:

.blog_wrapper {
  display: flex;
}

Добавьте перенос:

.blog_wrapper {
  display: flex;
  flex-wrap: wrap;
}

Это же касается всех остальных блоков, где вы используете display: flex.

Объедините слои в группу (Ctrl + G)

const yourSound = new Audio();
yourSound.src = 'myAudio.wav'; // ссылка на аудиофайл
document.getElementById('block').onmouseover = function () {
    yourSound.play();
}

Попробуйте пример отсюда - https://ruseller.com/lessons.php?id=1041

При помощи тега video : https://html5book.ru/html5-video/
можно убрать все управляющие элементы, добавить свою кнопку и повесить событие запуска на нажатие.

посмотрите код страницы
посмотрите код скрипта
делайте, как там написано, но для себя