Dymok

const capitalize = str => str.replace(/(^|\s|-)+\S/g, m => m.toUpperCase());

Фильтры CSS немного не про это. Тут, если мы говорим все же про верстку и CSS, то можно сделать наложение поверху с цветом, включающим в себя альфа-канал. Перед этим можно поиграться в ФШ, чтобы получить данные для цвета и его прозрачности.

Наложение это буквально 2 слоя, с разным z-index, где сверху либо тег, либо псевдоэлемент с цветом.

gulp plumber

Есть linear-gradient, но там плавный переход цветов...

не обязательно:

linear-gradient(to right, white 0%, white 33%, blue 33%, blue 66%, red 66%, red 100%)

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



Или скиньте мне ссылочку на макет, я посмотрю в чем там дело.

header .wrapper {
  display: flex;
  justify-content: space-between;
}
nav {
  margin-top: 54px;
  margin-left: 20%; - удалить
}
.topnav a {
  margin-right: 70px; - поменять на margin-left
....

Вот как меню у вас открывается, так же на при клике на элемент делаете обратное.

height: 100% у детей будет работать, если задать родительскому элементу четкое (эксплицитное) значение высоты.

min-height таким свойством не является. Оно не чёткое. Поэтому height: 100% работает внутри такого контейнера как height: auto.

Как один из вариантов,:
https://codepen.io/anon/pen/YgqEoJ

Таким методом удобно задавать соотношение сторон, кстати.

Создай брекпоинт примерно 1230пх и засунь их внутрь контейнера.

а зачем вы ширину высчитываете? Она же автоматом должна быть по всей ширине.

Возможно сделать с помощью плагина ACF PRO

Элемент называется Повторитель(Repeater)