DZHAMBUALT

Как вариант маска:

Боль-мене универсально с помощью clip-path и трюка с позиционированием:

Параметры заданы в коде: 380 и 44 – они приоритетные. Если их убрать, то всё получится. Или в css прописать 100% !important. Ну и в комментариях верно заметили про aspectRatio (поздно прочитал). =)

Возможно ли это?

Оо, это Вы по адресу, чего изволите?
- Обычная статика без шаблонизатора.
- Статика с шаблонизатором.
- Статика с шаблонизатором и внедрением react.
- React фронт без api.

Как мне это сделать я очень сильно запутался и ничего не понимаю. Возможно ли это?

Возможно, необходимо:
1. Собрать статику.
2. Перебить пути до изображений (если используется шаблонизатор).
3. Срезать шапку и подвал у каждого html из п1.
4. Конвертировать п1 и п3 в php файлы.
5. Врезать wp/php код из п4.
6. Врезать wp/php код с метатегами в header.php.
7. (опционально) встряхнуть (tree-shaking) css и js файлы, вырезав весь не используемый код.
8. (опционально) произвести оптимизацию статики, не только вес, но и размер изображений под разные размеры дисплеев устройств.

Мне хочется посадить сайт созданный с помощью webpack

Webpack не создаёт сайт, а собирает.

Эта тема очень обширна, нужен более точный вопрос.

Поиграть со селекторами nth-child и nth-last-child.

Для начала попробуем выбрать первый элемент последнего неполного ряда. Селектор :nth-child(3n + 1) выберет нам первые элементы каждого ряда.

Теперь надо ограничить этот список только последним рядом. Видно что нужный нам элемент всегда первый или второй с конца. Так и запишем :nth-last-child(-n + 2).

В итоге получили селектор :nth-child(3n + 1):nth-last-child(-n + 2).
Ну а дальше воспользуемся селектором ~ что бы выбрать все (в вашем случае не больше одного) элементы которые идут после уже выбранного.

Получается вот такой код:

li:nth-child(3n + 1):nth-last-child(-n + 2),
li:nth-child(3n + 1):nth-last-child(-n + 2) ~ li {
  .....
}

UPD: если надо что бы последний ряд выбирался всегда, даже если он полный, то надо заменить -n + 2 на -n + 3.

UPD2: можно пойти немного другим путём и выбирать все элементы после последнего элемента в полном ряду. Получится вот так:

li:nth-child(3n):nth-last-child(-n + 3) ~ li {
  .....
}

Как-то так:

function findSequence(input) {
    const adjacencyList = {}, indegree = {};

    input.forEach(([from, to]) => {
        adjacencyList[from] = (adjacencyList[from] || []).concat(to);
        indegree[to] = (indegree[to] || 0) + 1;
    });

    const start = Object.keys(adjacencyList).find(country => !indegree[country]);
    if (!start) {
        return false;
    }

    const result = [], visited = {};

    function dfs(node) {
        visited[node] = true;
        result.push(node);
        adjacencyList[node]?.forEach(neighbor => !visited[neighbor] && dfs(neighbor));
    }

    dfs(start);
    return result.join(', ');
}
findSequence([["USA", "BRA"], ["JPN", "PHL"], ["BRA", "UAE"], ["UAE", "JPN"]])//"USA, BRA, UAE, JPN, PHL"

Логика основана на гридах. Добавляются классы 'slim1, slim2, slim2, которые задают элементам определенное положение в сетке в правой части А у того, что слева добавляется класс 'active' .
Пример на codepen

Потому что у кажого импортированного модуля - своя область видимости переменных.
Импортируйте getPageTitle в getHeader . А если же getPageTitle отдельно не используется, можете его реэкспортировать из getHeader, а в основном скрипте не импортировать вообще.

Все делается довольно просто.

height:100% у этого дива убери

100% не будет работать, потому что у main тоже 100%, а у его родителя нет высоты. Значит и у main нет высоты, а значит и у дива тоже нет.

Используешь флексы - используй флексы, не надо костылять.

100% величина относительно родителя, у родителя высоты тоже своей нет, она не может быть высчитана, переход от 0 к ничему соответственно не может быть плавным. У тебя классический баян должен получиться. Если можно гарантировать что текст не будет выше какой-либо высоты (как в комменте 300 пикселей например) то проще всего менять max-height с нуля до этой величины, а так по хорошему текст надо кинуть в обертку, у нее менять высоту/максимальную высоту с нуля до ее scrollHeight, которая будет равна высоте ее контента - текста. Есть еще хак с grid-template-rows 0fr/1fr но не везде работает

Можно попробовать такие варианты:
background: url("../img/image.jpg") no-repeat center top/contain;
background: url("../img/image.jpg") no-repeat center center/cover;
background: url("../img/image.jpg") no-repeat center top / cover;
background: no-repeat top/100% url("../img/image.jpg");
background: no-repeat center/100% url("../img/image.jpg");

containers.forEach((el) => {
  el.addEventListener("click", e => {
    e.currentTarget.querySelector('.element-3').classList.add('active');
  });
});

самое простое

.navigation--list-group-item {
  white-space: nowrap;
}

JS выполняется на стороне клиента. Он не меняет файлы на сервере (потому что насколько я понял из вашего вопроса, вам нужно именно это)
Если хотите менять классы в самом html файле то в vs code выделите слово element, нажпмите shift+ctrl+l вроде и напишите новый класс
Ну либо используйте сборщики + шаблонизаторы, чтобы сильно не страдать когда надо что-то поменять в коде