Как сделать отступ?

line-height
https://developer.mozilla.org/ru/docs/Web/CSS/line...

Как реализовать такое поведение контента при скролле?

В HTML коде референса видно, что подключен greensock и его ScrollTrigger
https://greensock.com/st-demos/
https://codepen.io/GreenSock/pen/YzyqVNe

Как задать маску в виде изображения для картинки в html/css?

Ankhena, Тоже хороший современный вариант.
Илья Ломаев, Маску можно пропорционально сжимать с помощью aspect-ratio или хака с padding

Как задать маску в виде изображения для картинки в html/css?

Пропишите в html коде стили с фоновым изображением. Так их можно будет менять через админку, не трогая стили

<div class="test" style="background-image: url(https://via.placeholder.com/200x80/"></div>

Как создать обводку из градиента для input?

Обернуть input в какой-либо блок и стилизовать уже эту обертку. Если бы не было border-radius, то можно было бы обойтись и без обертки
https://css-tricks.com/gradient-borders-in-css/

Как сверстать такую таблицу с отступами?

Это больше похоже на таблицу с двумя ячейками в строке, разбитую на три колонки. Разбить таблицу на колонки можно с помощью columns

Можно как то поменять свойства before через js?

Можно с помощью css переменных (custom prorerties)
https://developer.mozilla.org/en-US/docs/Web/CSS/U...

Как сделай такой прелоадер контента для контента?

Skeleton Loading это называется. Скорее всего и под Bootstrap есть готовые решения.

Как решить проблему вывода названия города при клике на город?

Возможен ли запуск анимации при прокрутке страницы на CSS?

Смотря что за анимация. Без js можно с perspective анимацию сделать https://codepen.io/Hornebom/pen/dovmRq

Как расположить блок внутри flex бокса по центру?

Обернуть лого и текст логотипа в div, обернуть форму login в div и задать этим блокам одинаковую ширину.

Почему при дублировании идентичного объекта, он меняет свои характеристики?

RealBoy211, Вероятно.

Почему при дублировании идентичного объекта, он меняет свои характеристики?

RealBoy211, Печально. Тогда сделаю за вас эти круги

Почему при дублировании идентичного объекта, он меняет свои характеристики?

RealBoy211, Зависят от ширины родителя, если ширина и высота заданы в процентах. Если нужны пропорционально сжимаемые круги, то нужно гуглить про padding bottom hack или про aspect ratio
https://css-tricks.com/aspect-ratio-boxes/

Почему при дублировании идентичного объекта, он меняет свои характеристики?

Они сжимаются, если не хватает места. flex: 0 0 auto; должно помочь, если нужно сохранить размеры

.container {
    flex: 0 0 auto;
}

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

olya095, Имелась ввиду более изящная анимация. Например
Именно такой стрелки нет в юникоде. Похожих есть куча, но у них у всех есть острые углы.

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

Виталий Першин, Там напрашивается анимация этих стрелок, как написали выше в комментарии к вопросу. Поэтому такое решение.

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

Для третьей стрелки можно span добавить и использовать его псевдоэлементы по аналогии с двумя стрелками. Стрелки двигать с помощью absolute.
https://jsfiddle.net/n2q5ho97/

<a class="test">
  <span class="test-text">Подробнее</span>
</a>

Как блоку за контейнером содержимое сделать внутри контейнера?

funkydance, Разумеется ширину container можно и с помощью padding имитировать, только дополнительный блок надежнее. Не придется все переделывать, если вдруг ширину container кто-то захочет изменить.
https://jsfiddle.net/q7tgh8p9/1/

Как сделать непропорциональное изменение размеров изображения svg?

В svg viewbox мешает. Если его убрать, то все растягивается. https://jsfiddle.net/34xht0ka/
Есть и более правильные варианты решения проблемы https://css-tricks.com/scale-svg/