Ankhena

Как-то так:


Не очень хороший вариант, потому что нет защиты от переполнения.
Вариант с абсолютом ещё хуже.
А умнее варианта мне в голове пока не пришло.

p.s.
У h1 не может быть класса logo.
Потому что логотип и основной заголовок сайта это принципиально разные вещи.
И не лепите флекс всюду, где ни попадя.

Два <p> один под другим.
В каждом текст и псевдоэлемент (с картинкой) - флексом или гридом. Можно даже и без флекса. Псевдоэлемент сделать инлайн-блочным. И задать ему vertical-align: middle.

Альтернатива: вставлять картинки просто фоном, но может быть сложнее при адаптиве.

Если очень хочется оставить картинку как img, то нужно задать ей атрибут aria-hidden="true", а дальше любым из способов: инлайн-блоком, флексами или гридами.

Вы можете задать высоту (или минимальную высоту) 100vh.

Другой вариант: задавать высоту в %, но у родителя должна быть не нулевая высота. А у body она 0 по умолчанию. Соответственно, сначала нужно растянуть на весь вьюпорт html, затем body и только потом будет от чего считать высоту вашего блока.

раз https://codepen.io/AnnaSummer/pen/KKZKLjy
два https://codepen.io/AnnaSummer/pen/oNpNRrK

У вас два пути:

1. Повысить z-index контенту или просто задать ему position relative (это уже изменит контекст наложения)

2. Но есть более разумный вариант: избавится вовсе от псевдоэлемента и его абсолюта.
А черный полупрозрачный включить в фон всего футера в виде градиента.

background: linear-gradient(rgba(0,0,0, 0.8), rgba(0,0,0, 0.8)), url(../images/services-bg.png) no-repeat  top center/ cover;

Картинка это псевдоэлемент.
Он может быть на десктопах вынут из потока и размещен справа абсолютом.

Либо всё это может быть гридом, который перестраивается как нужно.

Дублировать контент тут точно не нужно.

Slick - устарел.
Он не поддерживает флекс для слайдов.
А это значит, что внутри слайда нужно сделать обертку и задать ей flex.

Если открыть инструменты разработчика, то можно увидеть display у кадров. (И много чего ещё полезного)

Альтернатива: перестать оборачивать картинки в 4 в один слайд, а сделать каждую отдельным слайдом и сказать, что нужно выводить по 4 за раз.

0% {
        transform: rotate(0deg)
                translate(calc(-50px * 2))
               rotate(0deg)
               scale(0.5);
    }
    50% {
        transform: rotate(-180deg)
                translate(calc(-50px * 2))
                scale(2);
    }
    100% {
        transform: rotate(-360deg)
               translate(calc(-50px * 2))
               scale(0.5);
    }

https://jsfiddle.net/v0yut1xq/

Так и писать
.block:hover .arbitrazh-19 {animation: и т.д.}

Потому что вот так:

.icon-facebook:hover::before{
  color: red;
}

Либо:

.icon-facebook {
  color: #ccc;
}
.icon-facebook::before {
  content: "\e900";
}
.icon-facebook:hover{
  color: red;
}

Как-нибудь так: https://jsfiddle.net/5yxezsd6/

Спрайт должен быть не из symbol, а либо из набора symbol+view+use либо из svg.
Вот пример с вашим флагом и спрайтом из svg.
https://jsfiddle.net/g7t1nf0r/

Хотя последнее время я в большинстве случаев стала инлайнить прямо в css предварительно конвертнув с помощью URL-encoder for SVG

Вам остается только модифицировать и применить к своему случаю.
У вас этот "кусочек" должен быть псевдоэлементом.

но почему то в этот момент "войти" смещается

Логично, потому что жирный текст занимает больше места.

Поправить так:


Альтернатива: заменить абсолют на гриды, но нужно обернуть текст в span.

Не для всех браузеров

Да что за напасть?
Не нужно делать это абсолютами
https://qna.habr.com/q/1107394
https://qna.habr.com/q/1102624

Обычный градиент под нужным вам углом.
https://jsfiddle.net/ma20jnf6/
Либо треугольный псевдоэлемент.
Либо clip-path.
Либо transform skew и задвинуть за край окна и обратный для текста.
Ещё что-нибудь, что я забыла.

Для простейшего прогресс бара есть тег <progress>

Для градиента так и написать, указав точки перехода:

background: linear-gradient(to right, #8dff80 25%, #57c53b 25%);

Если это регулируется через JS, то разумнее делать это через кастомные свойства.

Можно ли как-то отменить эту зависимость?

Можно, с помощью свойств align-items или align-self