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

Используйте свойства 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/YzxBQaZ
Все липнет) Вот пример)

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

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

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

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

Как-то так:

(slideWidth + gapBetweenSlides) * activeIndex + (screenWidth - slideWidth) / 2

где
slideWidth - ширина слайда
gapBetweenSlides - расстояние между слайдами
activeIndex - индекс активного слайда
screenWidth - ширина экрана на момент запуска скрипта
Набросал на коленке без теста. Возможно, что-то придется подкрутить.
Решение с учетом того, что есть горизонтальный скролл и по нему высчитывается положение потомка (это обертка в которой лежат слайды)

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

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

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

Здесь найдете готовый конфиг: https://github.com/romant094/gulp-template/blob/ma...

Не уверен, что на CSS получится такое реализовать. Здесь каждый div.block расположен в своей колонке и не имеет никакой связи с другими div.block'ами. Сами колонки можно выровнять по высоте без проблем.
Можно сделать на JS.

const blocks = document.querySelectorAll('.block')
const maxHeight = Math.max(...Array.from(blocks).map(block => {
  const { height } = block.getBoundingClientRect()
  return height
}))
blocks.forEach(block => {
  block.style.height = maxHeight
})

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

Думаю, проблема не в JS, а в CSS.
У вас последняя кнопка сползает. Вот у меня тоже это есть в самом верху.
Вот так ничего не прыгает.
https://codepen.io/romant094/pen/KKqWdqV

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

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

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

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

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