Рома Зварич

Судя по описанию, обычного цикла должно хватить

// Массив для получаемых объектов
const result = [];
// Переменная для следующего URL (изначально содержит первый адрес)
let previousURL = "http://site.com/";


// Цикл
for (let i = 0; i < 10; i++) {
  // Получение данных
  const response = await fetch(previousURL);
  const data = await response.json();

  // Добавление полученных данных в общий массив
  result.push(data);

  // Обновление переменной со следующим URL
  previousURL = data.previousURL;
}

// Демонстрация получивлегося массива
console.log( result )

По умолчанию ищет только первое совпадение.
Чтобы сделать поиск глобальным, нужно добавить соответствующий флаг "g"

var pathFor = new RegExp('(?<=href=")(.+?)(?=")', 'g');

Алгоритм:

1. Добавляем под текущую картинку новую elem.prepend(....)
   
2. У картинок свойство "transition: 1s"
   
3. Добавляем текущей картинке класс со свойством "opacity: 0" (она постепенно скрывается и если нужно, потом удаляем сам элемент из DOM)
   
4. Обновляет картинку, которая будет "текущей" по наличию класса
   

Идея с подстановкой "src" из атрибута "data-img" не очень хорошая. Если пользователь через мобильный зашел на сайт и скорость подключения маленькая или телефон не очень шустрый, картинки будут подгружаться с задержкой. Кажется, лучше их сразу все загрузить и просто скрывать все, а у нужной "opacity" выставлять на "1". Ну или в спрайт. Зависит от количества и качества.

Результат:
https://codepen.io/hisbvdis/pen/rNjbxbQ

Николай , Flexbox - одномерная система. Он "видит" строку только в одном направлении. Поэтому нельзя увеличить один элемент, не затронув другие в строке.

Вариант №1: CSS GRID
При этом, CSS Grid, например, двумерная.
Она позволяет работать и с колонками и со строками.
Как вариант, можно использовать её: https://codepen.io/hisbvdis/pen/pozdPeW
В этом примере получилось сделать смещение в сторону при увеличении элемента

Вариант №2: CSS Grid со смещением вниз
В это варианте сделал смещение вниз, но здесь нужно сделить за правильным количеством выставленных строк в гриде. И увеличение элемента смещает все нижележащие, перенося их на новую колонку.
https://codepen.io/hisbvdis/pen/bGbYRpL

Вариант №3: CSS Columns
В этом случае используется функционал CSS Columns.
Увеличение элемента приводит к тому, что он смещает внизу все элементы в колонке, которые все равно переносятся в новые колонки для равномерного распределения.
https://codepen.io/hisbvdis/pen/oNvoWmN

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

P.P.S. Как я написал в комментариях, недоработкой Вашего макета кажется то, что не продумано, куда будут деваться элементы, которые смещаются вниз. Они же не могут просто улетать вниз без последствий для всех последующих блоков

К сожалению, не силен в SVG, но нашел такую закономерность.
У Вас в SVG 3 элемента <pattern> с id="star", внутри которых находятся две линии, образующие "плюс".



Так вот, у Вас есть правило, которое окрашивает линии внутри элемента с тего ="id"в красный цвет при наведении


Если сделать для каждого элемента <pattern> уникальный ID, а для элемента circle сослаться на этот уникальный ID, то при наведении на первый пункт, цвет у других плюсов не меняется

Как насчет сделать так, чтобы элемент <input> занимал весь блок и клик в любое псевдо-поле всё равно попадал на него <input>?

P.S. Отвратительное юзабилити

https://jsfiddle.net/8adwgxyo/1/

В тег слайдера добавьте атрибут с настройкой data-flickity='{ "autoPlay": 1500 }'

Пример:
https://codepen.io/desandro/pen/NPyWRZ

Подобное поведение следует задавать через псевдоэлемент :hover

Результат:
https://codepen.io/hisbvdis/pen/VwZKedx

1) Запрещаете перенос текстаwhite-space: nowrap;
2) Скрываете всё за границами объекта при переполненииoverflow: hidden;
3) Через псевдоэлемент создаёте "исчезновение" текста в конце строки

Результат:
https://codepen.io/hisbvdis/pen/OJLNPEP

Указать такую логику в CSS нельзя.
Можно либо выбрать либо один следующий элемент на том же уровне, либо все последующие.

Возможно, решением может быть добавление еще одного уровня элементов, оборачивающих группу кнопок

<div class="buttons">
    <div class="row">
        <button class="parent">...</button>
    </div>
    <div class="row">
        <button class="parent">...</button>
        <button class="child">...</button>
        <button class="child">...</button>
        <button class="child">...</button>
        <button class="child">...</button>
    </div>
    <div class="row">
        <button class="parent">...</button>
        <button class="child">...</button>
        <button class="child">...</button>
        <button class="child">...</button>
    </div>
    <div class="row">
        <button class="parent">...</button>
    </div>
</div>

Если не нужен IE, то можно и двумя строками это сделать

.fix {
    ...
    position: sticky;
    top: 0;
}