Антон Романков

Если анимация этих элементов не нужна, то я бы весь фон картинкой сделал.
Если они должны как-то себя вести (следовать за мышью, увеличиваться при наведении и проч), то однозначно элементами с абсолютным позиционированием.

Я бы сделал по контейнеру на каждую линию и прописал бы для каждой css:

display: flex;
gap: 10px;
flex-wrap: wrap;

Также надо прописать для каждого элемента стили, отвечающие за ширину.
flex: 1 0 300px;

Либо сделать сетку, как в бутстрапе, например.

padding: 0 10px;
width: 25%;
media screen and (max-width: 992px) {
    padding: 0;
    width: 100%;
}

Чтобы 3 изображения вставить, вам надо их позиционировать абсолютом.
Но надо ли? Не проще ли взять из макета уже целое изображение? В фигме это делается на 1-2-3

Свойство display не анимируется. Используйте для этой цели transform rotate, height, opacity и проч

Используйте свойства background
https://developer.mozilla.org/ru/docs/Web/CSS/back...

Картинки можно из Ифгмы вытащить непосредственно

Я бы использовал это как background-image и не парился бы.
Вам явно не требуется ховер с изменением цвета, поэтому можно обойтись тем, что я выше написал

Пример на флексах: https://codepen.io/romant094/pen/VwzgBYv

Проблема в третьей секции, которая закомментирована.
Если в репите прописать 2, то будет все по центру grid-template-columns: repeat(2, 1fr);

https://codepen.io/romant094/pen/oNeEgyy

Сделать не , а через background.

background-image: url('./image-path.jpg');
background-position: center center;
background-size: contain;

Но тут будет ограничение - картинки будут обрезаться. Можно поиграться с размером в %.
Но вообще лучше для таких целей подготавливать изображения примерно одного и того же размера, чтобы они аутентично смотрелись.

Я бы попробовал грузить шрифты асинхронно.
Сначала показать контент с дефолтными шрифтами, а после загрузки первого экрана (см. critical css) подгружать шрифты кастомные.
Вот тут про это можно найти https://habr.com/ru/post/436966/.

Вообще, чтобы делать полноценную оптимизацию, нужно понимать, как браузер ведет себя когда юзер перешел на сайт. Об этом можно почитать тут: https://habr.com/ru/post/320430/

Вот так: https://developer.mozilla.org/en-US/docs/Web/API/N...

Это вам нужно смотреть SDK MS Office. Там явно будет это прописано.

https://developer.mozilla.org/ru/docs/Web/CSS/:nth...
Вот тут примеры можно посмотреть.
Сделал пример, как это должно быть в вашем случае: https://codepen.io/romant094/pen/XWgBQOZ

Javascrupt'a будет достаточно. У всех крупных сервисов есть API. Поэтому можно сделать так:
1. Сделать функции, которые будут асинхронно дергать API и получать список постов. Как это сделать? Нужно читать документацию.
2. Promise.all([apiCall1, apiCall2, apiCall3...]).then(data => data.map(....)). Здесь будут дергаться все API, а потом что-то надо сделать с постами. Хорошо бы модели прописать и привести все к одному виду, чтобы потом уже с этими данными работать. Но тут стоит учитывать, что если хотя бы один API вернет ошибку, то все упадет. Так работает Promise.all. Можно, конечно, и последовательно вызывать каждую функцию и обрабатывать результат ее выполнения, но будет не сильно элегантно :-)

Такие вещи в песочницу надо выкладывать.
По скринам не понятно. Более того, вы стили не заскринили.

Можно изменить высоту только у iframe самого верхнего уровня. Все, что внутри, неизменяемое для внешних источников. Ваше приложение в данном случае будет как раз таки внешним истотчником.

Как насчет того, чтобы сделать overflow-x: auto?
В вашем примере добавил

Вот, что получилось: скринкаст