Ankhena

Изучайте гриды и флексы.
Сделать можно, например, так: https://jsfiddle.net/kj5vf8ah/

Вы можете:
1. Сделать фон градиентом с четкой границей
css.yoksel.ru/linear-gradients
2. Задать фон псевдоэлементу
3. Построчно так:

или даже так:

Радиальными градиентами. Один цвет - цвет фона, второй transparent.
Задаете радиус кругов и размер "квадратика".

background: radial-gradient(4px, transparent 100%, #333) repeat center / 20px 20px;

https://jsfiddle.net/0d651jrw/

text-size-adjust: none; //запрет авто-увеличения текста на мобилках

https://developer.mozilla.org/ru/docs/Web/CSS/text...
Технология экспериментальная, нужно смотреть поддержку на caniuse и не забывать префиксы.

article:nth-child(-n+2) .new {
  color: red;
}

Может, вам поможет clamp, min или max?
https://developer.mozilla.org/en-US/docs/Web/CSS/max()
Поддержку проверяйте на caniuse

Или попробуйте переформулировать вопрос. Хотя бы опишите словами что там происходит с шириной блока.
А ещё лучше с картинками.

Что имелось в виду?

Это и имелось в виду. То, что написано в комментарии.

Родитель ничего не знает о высоте дочерних флоатов.
Если все дети флоаты, то высота родителя будет нулевой.
Чтобы она перестала быть нулевой и стала вести себя как высота по контенту, использовали overflow.

Если вы зададите родителю фон или даже лучше бордер и проведете эксперимент, то всё сами увидите.

Множественные фоны пишутся через запятую.
Первый верхний, последний нижний.
У вас верхний это линейный градиент, нижний картинка.

Например, что-то в таком духе https://jsfiddle.net/m06bkpdy/
Или svg
Или border-image
Или вообще объединить с картинкой, но нужно смотреть макет.

p.s. лучше вот так расположить градиент
Чтобы не высчитывать размеры для средней полосы.

Большим ячейкам задаете grid-column: span 2

Сделать фон полосатым градиентом с точками переходов указанными в em с учетом размера шрифта и line-height.
Удобно использовать кастомные свойства.

С помощью :placeholder-shown
https://jsfiddle.net/Lnsj5ea6/

1. Название шрифта всюду должно быть одинаковым, просто font-family: Gilroy
2. В подключении указывайте жирность
3. Если вы не поддерживаете совсем уж древности, то достаточно форматов woff2 и woff

Пример:

@font-face {
        font-family: "OpenSans";
        src: url("fonts/opensans.woff2") format("woff2"),
        url("fonts/opensans.woff") format("woff");
        font-weight: normal;
        font-style: normal;
        font-display: swap;
        }

        @font-face {
        font-family: "OpenSans";
        src: url("fonts/opensansbold.woff2") format("woff2"),
        url("fonts/opensansbold.woff") format("woff");
        font-weight: 700;
        font-style: normal;
        font-display: swap;
        }

align-self отвечает за выравнивание конкретного элемента вдоль поперечной оси флексбокса.

Тем, которым нужно направо, задавайте align-self: flex-end

h2:hover::after {
content: "";
и т.д.
}

Либо
.title3:hover ~ .block-with-picture3 {}

По аналогии

Расстояние между блоками и чертой одинаковое, чего бы им съезжать?
https://jsfiddle.net/0k6a2bgs/