Ankhena

Казалось бы, с этим должно справляться свойство min-content. Но оно не справляется.

Оно справляется. Но вы не почитали, что значит auto.

Должно быть так
grid: min-content 1fr / 1fr 1fr;

чтобы картинка подстраивалась под размеры данного блока

Если это фон: background-size
Если img, то object-fit

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

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

<div class="parent" style="--p_inherit:30px; padding-right: 30px">
  <div class="parent__child pl_inherit pr_inherit">123</div>
</div>

.parent {
  padding-left: var(--p_inherit);
}
.pl_inherit {
  padding-left: var(--p_inherit);
}

Ну только кастомное свойство нужно нормально назвать.

Либо дочернему так прямо и писать padding-left: inherit;. Но это, конечно, зависит от того, как вы планируете дальше обращаться с этой переменной.

1. Фон градиентом шириной в 2px (ну или сколько там по макету).
2. Псевдоэлемент флексом, гридами или абсолютом. Последний вариант менее предпочтителен.
3. border одного из блоков. Или половинчатый (по 1px) у обоих.

Ещё как-нибудь...

Как-то так:


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

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.

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