ksnk

Надо исправить ошибки.
Их много. Например свойство pagination определено 2 раза.
Но это не так страшно, javascrpt игнорирует ненужное,
type: 'custom', нужно определить в секции pagination, чтобы вообще вызывался собственный рендеринг, вот тогда обнаружится еще одна -

const end = current + 1;
        if (current < 2) {
          end += 2 - current;
        }

Присвоение константе - этого JS уже не прощает...
Дальше уже нужно править стили...

Можно поизвращатся.
Вставить элемент с нужными границами и вырезать из него все ненужное
Ну или даже одним элементом

Надо на верстку смотреть, но обычно - заголовку блока задают либо фиксированный размер+overflow:hidden, либо min-height. К примеру 2.5em (подбирается по месту, чтобы влезало точное количество строк). В этом случае в заголовок будет помещаться 2 строки текста. и все описания, расположенные ниже, окажутся на одной высоте. Если min-height задать, то очень большой заголовок не будет обрезан, а поместится полностью, но именно этот блок окажется сдвинут. Останется только вручную посмотреть что не влезло и поменять заголовки, или оставить так...

https://jsfiddle.net/wjg8oLsd/ Не то ?
функция вычисления размера инпута стырена со stackoverflow
P.S. Обновил решение

htmlbook.ru/css/border-image
Картинку с бордером можно нарисовать хоть в svg, но если png - в этом случае разумно будет примерно соответствовать средним размерам кнопок, чтобы при разных размерах не бросались в глаза артефакты при увеличении картинки

Зависит от смысла задачи. Если поместить что-то такое на сайт, то гуглить по слову `wordart wordcloud`. Если понять, как делать самому или даже попытаться сделать - гуглить по словам "Облако тегов" или вот ссылка на доку от автора Wordle

На js - Пример, и гитхаб

Нужно найти/нарисовать картинку с анимированием открытия двери, и сделать что-то такое
В примере анимация стартует по наведению мыши, в прелодере лучше добавить правило, применяющее стиль в конце тела прелодера - блок стилей перед < / body > . Или по таймауту на javascript.

Да, scale будет разумнее, чем установка размера, если картинка в большом увеличении не будет выглядеть коряво. Если картинка рисованная - указать размер в пикселях может быть более правильно.

Нарисовать картинку в svg. Пристроить ее в бякграунд вот так https://habr.com/ru/post/257781/

filter:blur- все правильно, но 20 как-то сильно, лучше 4 или подобрать по месту. Ну и самое главное - поставить ту же самую картинку, что в бякграунде и двигать ее положение на JS при смене размера экрана. Правда фон лучше сделать фиксированный, а не cover, иначе расчетная часть будет слишком сложной для тостера.
Если хочется повозится с размером фона - нужно расcчитать размер элемента с фоном, поставить ему background-size: auto 100%; - это для определенности, это почти cover...
Элементу с блуром поставить background-size: auto <высота элемента с фоном> ;

А что сделать-то надо ? Если полностью резиновый дизайн - то для начала - сделать полностью "резиновую" кривую, с возможностью получить реперные координаты блоков. Лучше такую кривую делать на svg, так как при расширяемой картинке будет меняться ширина линии. Само решение для линии может выглядет так - по window.resize, через маленький интервал времени перерисовываем кривую на svg и вставляем ее в бякграунд.
Для блоков с текстом все страшнее - нужно расставлять блоки не точно в реперные точки, а так, чтобы блоки не налезали друг на друга. Если сам текстовый блок будет не такой, как кажется дизайнеру, а такой как хочется владельцу сайта, то придется освоить ремесло плиточника ;)
Как простой вариант - ставить текстовые блоки с репером в левом-верхнем углу, а если выходит за рамки - то правым или нижним... на том же window.resize

<link rel="stylesheet" type="text/css" href="create_css.php">

В файле create_css.php содержится css
На JS тоже можно генерировать стили, но, imho, разумнее заниматься этим на стороне сервера

Тот язык, на котором написан пример называется Javascript (js). Чем еще можно помочь? :)