ⓒⓢⓢ

можно попробовать возложить парсер на плечи браузера, как пример
https://codepen.io/anon/pen/XBjbYE?editors=0011

размытие действует только на слой в котором установлен, в данном случает на слой без картинки
примерно так:
https://codepen.io/anon/pen/YjWNYp

для ".image_background" добавить стиль
font-size: 0;

Текстом и с примерами, чтобы сразу пощупать в действии, по мне лучше и быть не может ...
CSS_Grid_Layout

Насколько рационально использовать гриды в проектах?

Я с презрением к гридам. Нет особого перевеса в положительную сторону. Да - ждём, да - хотим, но флексы покрывают 99% задач + 1% силами обычных слоёв и фреймворками. Основной недостаток это конечно же поддержка браузерами, для меня незачем ограничивать себя браузерами, ради почти ничего
Мой вывод: Не рационально

outline:none;

https://jsfiddle.net/bd68az1v/

Названия полностью выдуманные, не включая первые два символа "--"

$(window).load(function(){
  /* В этой строке overlays у тебя будет NodeList (не jQ объект) */
  let overlays = document.querySelectorAll('.overlays .overlay')

  $('.close').click(function(){
    $('.overlay').fadeOut()
  })

  $('.gallery-item').click(function(){
    /* Тут у Node пытаешься вызвать jQ метод, которого соответственно нет */
    // overlays[$(this).index()].fadeIn()

    // Пробуй что-то такое
    let i = $(this).index()
    $(overlays[i]).fadeIn()

  })
})

Например:
jQuery.fn.jquery // или $.fn.jquery
Если jQ имеется, то в ответ будет строка с версией
Иначе выбросит исключение

Uncaught ReferenceError: jQuery is not defined
Uncaught TypeError: Cannot read property 'jquery' of undefined

Но никто, не мешает определить эти свойства не загружая сам jQ ...

margin: auto

код для разных экранов посмотрел.

плохо смотрел

@media only screen and (min-width: 640px)
.first-screen {
    padding-top: 43.1%;
}

vertical-align: middle;
выравнивает относительно родителя. А родитель в данном случае ".item", старается быть как можно меньше и места совсем нет для вертикального выравнивания ...
Расширить ".item" \\ или vertical-align: middle; для ".item"

filter: brightness(0) invert(1);
https://jsfiddle.net/ku9uewwf/
Опять же кроссбраузерность проверь

код в песочнице какой то кривой, отличается от твоих скринов
https://yadi.sk/i/kbxD6tP63TroMP

На вскидку попробуй:

header {
    padding-top: 20px;
    padding-bottom: 365px;
}

Заменить на:

header {
    padding-top: 20px;
    height: 100vh;
}

Не совсем понятно какой эффект в итоге должен быть, например такой вариант
https://jsfiddle.net/pab6dfg2/1/

Веб-сокет - постоянное соединение - передача данных в реальном времени - данные поступили их обновили
30 сек - это далеко не "обновление в реальном времени"

-webkit-tap-highlight-color: transparent;
источник: CSS и iOS Safari

Я бы сделал один свг файл, внутри сделал именованные группы для каждой буквы.
Но а в документе уже ссылаться на имена групп
Где хранить этот свг файл? Если буквы без дизайнерский изысков - маленькие по размеру, то в конец документа, иначе подгружать уже после отрисовки страницы

В поиске перейди на вкладку Code
Пример