Рома Зварич

Не подсвечивается, потому что псевдокласс :first-child указывает на первый элемент среди всех элементов, а не первый элемент с данным классом.

По сути, селектор .landing-block__description:first-child означает элемент с классом .landing-block__description, который является первым в разметке.
Но он ведь первым не является. Перед ним еще есть элемент с классом .landing-block__title

Это Taskrunners (запускатели задач), предназначение которых - с помощью JavaScript-библиотек автоматизировать большое количество различных процессов, которые производятся с ресурсами проекта при разработке и отправке в продакшн.

Например,
– Компиляция файлов препроцессоров в CSS
– Объединение большого количества файлов стилей в один
– CSS, JS, HTML, SVG -минификация
– Сжатие изображений
– Создание спрайтов из отдельный SVG-файлов
– Оптимизация и в какой-то степени "валидация" HTML (например, проставить атрибут alt у всех img
– и много другого

Проблема в пути, который Вы указываете к исходным картинкам.
Вы вместо очередного слеша указали точку
Замените этот фрагмент кода

src: {
        html: "src/*.html",
        js: "src/assets/js/*.js",
        css: "src/assets/sass/style.scss",
        images: "src/assets/img/**.*.{jpg,png,svg,gif,ico}"
    },

на этот

src: {
        html: "src/*.html",
        js: "src/assets/js/*.js",
        css: "src/assets/sass/style.scss",
        images: "src/assets/img/**/*.{jpg,png,svg,gif,ico}"
    },

Есть *иконка* черного цвета,

Было бы лучше, если бы вы приложили код файла этой иконки, чтобы на Вашем примере можно было показать решение.

но что делать, если мне нужна она белого цвета

Открыть svg-файл с помощью графического редактора или редактора кода и изменить цвет

Можно как то изменить цвет ?

Можно. В основном, цвет SVG-элементов задаётся через атрибут/свойство "fill", иногда через атрибут/свойство "stroke". В зависимости от типа фигуры.

Повторюсь, что если приложите код файла иконки, смогу показать решение на Вашем примере.

Update
Вот Вам код svg-файла с белым цветом значка

<svg height="34" viewBox="0 0 24 24" width="34" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z" fill="#fff"/></svg>

А вот он же, но закодированный в Base64 (в котором Вы предоставили пример)

data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=

Из описания делаю предположение, что обычный тег <img> используется как фон элемента

Не видя Вашего примера, приходится только догадывать, какая у Вас ситуация и как её можно решить

Как вариант, родительскому элементу задать overflow: hidden, а изображение позиционировать абсолютно.

Результат:
Наведите на картинку курсор - картинка уезжает за пределы блока, ширина которого равна ширине экрана
https://codepen.io/hisbvdis/pen/NWWEpxb

Использование атрибута "align" для html-элементов осуждается. Так делать не нужно.
Через классы задаём высоту блока на весь экран и центрируем (например, через Flexbox) его содержимое (внутренний svg-элемент)

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Результат:
Код + демонстрация: https://codepen.io/hisbvdis/pen/qBBMGLp

Проблема решается и в Firefox, если размер (высоту) поля задавать не фиксированной, а за счет padding (что логично)

Результат:

У меня есть тег svg

И для тега <svg> задан размер 75x22

внутри которого код картинки

Код не совсем картинки. С помощью svg-путей (кривых линий) написан текст "pink"

мне нужно что бы контейнер svg, и изображение были размером 75x22

Проблема в том, что текст нарисован с помощью абсолютно указанных координат. И начинается это рисование с отступом в ~70px по оси X и ~18px по оси Y. Естественно, при холсте всего в 72x22px кривые будут выходить за рамки холста.

почему если у svg тега из моего примера сбросить размеры и вьюбокс, изображение находится по центру

Я так понимаю, под "сбросить" подразумевается "не указывать вообще"?
Потому что по умолчанию, svg-элемент имеет размеры 300x150px и при таких размерах нарисованные с помощью абсолютно заданных координат кривые видны.

UPDATE:

как можно сделать, что бы svg изображение всегда было по центру svg контейнера?

Не проще ли сделать нужный контейнер через HTML, а внутри него уже позиционировать SVG-элемент с фиксированными размерами?
Также, я изменил принцип рисования этого слова, чтобы оно не отступало 75px слева
Пример:
https://codepen.io/hisbvdis/pen/jOOKRNv

Описание элемента "use" на MDN

Элемент <use> берёт теги из SVG-документа и дублирует их где-то еще

Следовательно, Вам следует внутри подключаемого SVG-файла указать для элемента ID и указать его при ссылке на данный SVG-файл

Пример
<svg class="part__svg">
<use xlink:href="/images/icons/cat20.svg#cat"></use>
</svg>

UPD: применению стилей мешали атрибуты внутри SVG

Как изменить этот радиус на css или js, jquery?

Например, обратившись к фигурам кругов, вложенным в элемент с id="myMask"

#myMask circle {
  r: 2;
}

Результат:
https://codepen.io/hisbvdis/pen/mddprBd?editors=1100

можно ли добиться такого адаптива при помощи flexbox

На Flexbox можно этого добиться дублированием нужного блока и отображением одного из них на каждом разрешении экрана.
Пример на Flexbox:
https://codepen.io/hisbvdis/pen/eYYGOQd

Пример на Grid:
https://codepen.io/hisbvdis/pen/ZEEXzgB

Тегу ul добавьте свойство grid-auto-flow: column;

Результат:
https://codepen.io/hisbvdis/pen/XWWRmEQ?editors=1100

Как реализовать такую сетку на grid?

1) Задаёте размер строки в сетке с помощью свойства grid-auto-rows
2) Определённым элементам задаёте свойство grid-row: span 2;, чтобы они занимали две строки

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

В Вашем случае, чтобы ничего не считать с помощью JS, лучше вместо Grid использовать CSS Columns.

Просто задаёте количество колонок через column-count: 2; и ничего подсчитывать не нужно.
P.S. Для дочерних элементов еще задать break-inside: avoid;

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

Как добиться подобной трансформации?

С помощью свойства transform
1) Устанавливаете перспективу
2) Поворачиваете элемент вкруг оси Y

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

блоки внутри .reg не видят ширину в процентах

Во-первых, что значит "блоки внутри .reg"?
Вы задаёте ширину не непосредственным детям элемента .reg, а детям его детей.
В итоге, всё работает.
Вот блок .name input имеет ширину 50% от родителя .name

Но Вы, по всей видимости, хотели изменять ширину .name, а не .name input

Если не нужен IE, можно сделать с помощью чистого CSS.
А именно, с помощью position: sticky;

UPD: вижу, что IE нужен

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

1. Почему флекс элементы с разным текстом занимают по ширине именно столько места? https://jsfiddle.net/hkz91s0f/1/

Количество содержимого в элементе влияет на его базовый размер. Чем больше содержимого - тем больше места, выделяемого под элемент

Можно ли при flex-direction: column, сделать высоту опять одинаковой?

Можно. Задайте для элемента с классом inner свойства
flex-grow: 1;
https://jsfiddle.net/hisbvdis/g7pzwdqt/1/

Как сверстать карточку товара без верхнего уголка?

Если не нужен IE и Edge, то через Clip-path.
Если нужен IE и Edge, то как-то так.
Левый нижний и правый верхний уголки не идеальные, но зато решение без усложнений

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

Как сделать два блока прижатые к сторонам?

Задайте для элемента с классом .flex-container свойство justify-content: space-between;

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