Андрей Верх

Разбейте на 24, а не 12. Почему вы упёрлись именно в 12 колонок. Разумеется в такие "толстые" колонки, ничего нормально не впишешь.

Ну и судя по макету, он вообще на сетке не особо то и завязан. Элементы спокойно в gutter попадают, чего быть не должно.

Нет. Флекс ведь элементы выравнивает по одной оси.

Вы всегда можете увеличить стандартное кол-во колонок с 12, до 24 и более... Тогда таких проблем возникать не должно.

В понимании заказчика, вы свободны 24часа в сутки, вы же фрилансер. Как он должен понять, что вы торопитесь получить заказ, если вы об этом ему не говорите?

Надо чётко обозначать рамки своего свободного времени и занятости. Например: "Я свободен ещё один день, потом вам придётся ждать неопределённое время". Тогда человек сам поймёт, что в его же интересах поторопиться.

Но практика подсказывает, что чем дольше человек отвечает, тем меньше он в чём-то заинтересован. Так что не нужно тратить много времени на таких заказчиков. Ищите более расторопных.

Чудес не бывает, шрифту в любом случае надо загрузиться. То что первые секунды дефолтные шрифты показываются, это как бы нормально. Хуже, когда вообще ничего не показывается.

Можете попробовать
font-display

Всё это просто делается через flexbox

1. Увеличивайте высоту всей шапки, а не каждого элемента в отдельности. Элементы можно красиво анимировать через opacity.
2. Анимируйте появление на CSS, а не через js

Сейчас действительно ужасно выглядит.

А сколько по вашему их должно быть? 4 айтема на первом экране, 2 на втором. Всё верно.

Другое дело, что есть баги с кнопками прокрутки. И их много, по личному опыту...Используйте лучше owl карусель.

очевидно что вам нужно дописывать для каждого варианта
#tab1:checked ~ #content1

Попробуйте применить CSS маски. Без IE, зато самый правильный способ

htmlbook.ru/blog/maskirovanie-v-css

Обёртке задайте отрицательный правый маржин, чтоб компенсировать отступ.