GoodProject

Подпишись на событие прокрутки, потом проверяй положение элемента относительно окна браузера. И в зависимости от положения, меняй размер элемента. Простые математические расчеты.

Я бы сказал так - в бекенде можно себе позволить быть консервативным по сравнению с фронтендом, потому что рядовому клиенту пофиг, как работает что-либо, ему важно то, как это выглядит. Следовательно фронтенду нужно "следить за модой", а бэкенду нужно уметь сделать что-угодно с любым привычным ему инструментарием, минимально подходящим для этого, т. е. подгоняться под новинки не необходимо.

Если честно, на Open Server у меня были проблемы с тормозами WordPress.
Во-первых, проверьте, что вы выполняли процедуру "Первый запуск" (Дополнительно -> Первый запуск)

И моя проблема была связано с прописыванием адреса MySql в конфиге WordPress. Я писал просто localhost. После смены на 127.0.0.1 (Адрес сервера в настройках Open Server) всё начало летать

Сделал: https://fiddle.jshell.net/fqa2ezxh/1/

Но это не универсальный вариант. Просто обернул пары блоков контейнерами и тоже сделал их "flex".

Посмотрите вот эти две статьи с хабра:
Как сверстать веб-страницу. Часть 1
Как сверстать веб-страницу. Часть 2 — Bootstrap
И прочтите все комментарии к этим статьям (впрочем, как обычно на хабре:)
Очень хорошие статьи, пошагово расскажут, что делать с макетом.
UPD. Ещё одна статья от того же автора:
Как сверстать тему для WordPress

все, что используется везде - в одном файле.
индивидуальное - в отдельных или тоже в одном, в зависимости от ситуации.

в реальности, можно спокойно валить все в один файл: он все равно клиентом качается только один раз, после чего падает в кеш.
а минификация и сжатие решают проблемы с размером.

$(".nav_button").click(function() { // Тут класс твоей кнопки
    $('.navigation').slideToggle(300);  // Тут класс твоего меню, предварительно оно "display:none"
  });

Делаете label для чекбокса, сам чекбокс скрываете, для label через :before добавляете нужные стили. (когда checkbox:checked и checkbox в обычном состоянии, но важен порядок тегов в коде). На хабрахабре описывался подобный способ.
Псевдокод:

<input type="checkbox" id="checkbox"><label for="checkbox">Test</label>
<style>
    #checkbox {
        display: none;
    }
    
    #checkbox:checked + label:before {
        content: "* ";
    }
    
    #checkbox + label:before {
        content: " ";
    }
</style>

Будет отображать звездочку для отмеченного чекбокса и галочку для пустого чекбокса. Тебе остается просто заменить это все на картинки. Клик по ним тоже будет работать, т.к. :before :)

На мой взгляд лучше всего так, отдельный класс кнопке скрытия и отдельный класс блоку который будет скрываться, вот пример: https://jsfiddle.net/ngdxcob8/
И он будет работать на любом уровне вложенности.

$('.close-btn').on('click', function(){
    $(this).closest('.hideme').hide();
})

демо