Ankhena

Радиальными градиентами. Один цвет - цвет фона, второй 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

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

Можно оставить как есть.

Можно переписать так:

.parent__child {
  background: gray;
  @media (max-width: 777px) {
    background: orange;
    
    .parent--custom & {
    background: red;
  }
 }
}

можно так:

.parent__child {
  background: gray;
  @media (max-width: 777px) {
    background: orange;
  }

  .parent--custom & {
    @media (max-width: 777px) {
      background: red;
    }
  }
}

А совсем хорошо вот так:

.parent__child {
  --color: gray;
  background: var(--color);
  @media (max-width: 777px) {
    --color: orange;
  }

  .parent--custom & {
    @media (max-width: 777px) {
      --color: red;
    }
  }
}

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

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

Родитель ничего не знает о высоте дочерних флоатов.
Если все дети флоаты, то высота родителя будет нулевой.
Чтобы она перестала быть нулевой и стала вести себя как высота по контенту, использовали 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/

У вас два фоновых прямоугольника.
У обоих размер фона 75px на 50%
Один фон прибит к верху правого края, другой к низу.
В каждом простой диагональный градиент.
Всё.

Внутренний блок с абсолютом в примере - также абсолютно лишний.

https://jsfiddle.net/f4b2yp58/

Ну держите


Другой вариант, без float, но с display: contents