Ankhena

Обычный градиент

Если это действительно прогресс, а не украшалка, то есть тег progress.

https://codepen.io/AnnaSummer/pen/dyJJvaE

Добавлять псевдо не при наведении, а сразу.
И задавать ему что-нибудь типа visibility: hidden

p.s. псевдоэлементы пишутся с двумя двоеточиями ::before

Начните читать эту непонятную портянку...
Далеко не нужно, первую строку.
Там есть image/png;base64
Т.е. вам прямым текстом сказано, что это обычная png засунутая в контейнер SVG

Это не контентные изображения.
Это украшения ссылок, их делают фонами и/или псевдоэлементами.
Поменять цвет удобно с помощью mask https://codepen.io/noahblon/post/coloring-svgs-in-...

Возможно ли это сделать для svg, добавленный через тег img?

Можно с помощью фильтров. Метод описан в статье по ссылке выше. Мало удобен.

Или лучше вставить код файла svg?

Лучше убрать картинки в css и использовать как mask.
Можно заинлайнить в CSS с помощью https://yoksel.github.io/url-encoder/

Казалось бы, с этим должно справляться свойство 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: и т.д.}