Ankhena

1. Не надо сортировать селекторы по алфавиту.
2. Если все блоки text красные, а какой-то один синий, то это модификатор для .text

div__title для заголовка
div__button (если нужен) btn двойной класс для кнопки (зачем p внутри кнопки я не знаю)
div__text для абзацев

Вот посмотрите на ваши интервалы (все как в школе ;) ).
В перекрывающихся интервалах побеждает то свойство, которое написано последним.

Фанси для этого - лишнее.

Это можно сделать хоть на чистом CSS с помощью target waksoft.susu.ru/blog/2016/07/16/tvorcheskoe-ispolz...

Либо простой js/jq и data- атрибуты

2 варианта: https://jsfiddle.net/o4wjbkzc/

Без JS вовсе: якорь и scroll-behavior smooth https://developer.mozilla.org/ru/docs/Web/CSS/scro...

На выходе получите обычный CSS.

С компиляцией потом разберетесь, когда самостоятельно начнете пользоваться.

Оберните в ссылку сами и покрасьте в желаемый цвет, пользователи и не заметят.

Вот так: https://jsfiddle.net/7d0fwpmc/
Но если ширина логотипа будет неизвестна, то абсолютом.

Если вдруг по центру оставшегося пространства https://jsfiddle.net/u13tmyhj/

Не меняя разметки, да и стили только слегка: https://codepen.io/anon/pen/EdNqjp

копать туда:
https://www.cssportal.com/style-input-range/
https://refreshless.com/nouislider/examples/
ionden.com/a/plugins/ion.rangeSlider

Смешно, но проще всего это решается на флоатах
https://codepen.io/anon/pen/mzrPoa

Вариант с order возможен, но заморочист при текущей разметке.
И тогда удобнее в обратном порядке.
Первой должна идти картинка, потом заголовок и текст.
Выстраиваются они с помощью columns в 2 столбца.
А когда в один столбец, вот тогда уже order.

Задавайте им по одной границе.
https://jsfiddle.net/kjm80uso/

.input__kids:checked + span{
  background-image: url(/images/svg/cheked.svg);
}

<label class="label__kids" for="1.1">
<input name="kids" class="input__kids" type="checkbox" name="1" id="1.1">
<span></span>
</label>

и размеры, понятное дело. Сам инпут скрыть.
Либо
инпут не внутри лейбл, а лейбл после инпут, тогда будетinput:checked + label

На CSS так
https://jsfiddle.net/tqg0Le91/
или так: https://jsfiddle.net/a734zx6o/
позиционируйте как вам нравится, думаю мысль понятна.

Либо на JS. Решений в инете полным полно.