Сергей delphinpro

Не особо понятно. Цвет - наследуемое свойство, что у body назначено, то и у потомков будет, если не переопределено.

Можно использовать переменные

body {
  --body-color: red;
  color: var(--body-color);
}

.test {
  color: var(--body-color);
}

.container {
  dispaly: flex;
  justify-content: space-between;
}

Учитывая доминирующее положение хромиум браузеров, можно обойтись без плагинов (которые могут заглючить, и поди разберись почему). Используйте стилизацию псевдоэлементов ::-webkit-scrollbar-*. Можно сделать достаточно симпатичные скроллбары. Примеры можно загуглить, например, на кодпене.
Для оставшегося в стороне огнелиса можно использовать стилизацию стандартизованных свойств для скроллбара (не помню, вошли они уже в спеку или нет, но файрфокс их поддерживает). Там поменьше возможностей, но более или менее под дизайн подогнать можно, хотя бы в плане цветовой гаммы.

Как вариант:
https://codepen.io/delphinpro/pen/VwQGYMX?editors=1100

https://codepen.io/delphinpro/pen/gOvKRMo

Для понимания вопроса загуглите тему про специфичность селекторов и каскадность стилевых таблиц.
В общем случае, вы почти ничего не можете сделать, потому что у вас нет возможности изменить сторонний код.
Но вы можете переписать свои стили так, чтобы они не влияли на кнопку.

Например в данном коде есть следующие селекторы

button {}
[type="button"] {}
.SIZE_5 {}
button[type="button"] {}
button.SIZE_5 {}

Вы можете убрать из своих css файлов эти селекторы

<span class="amount-curr whole-text">валюта&nbsp;с&nbsp;НДС</span>

Или

.amount-curr {
  white-space: nowrap;
}

но в edge ширина картинки расползается по всему родителю.

Правильнее сказать в edge до 2017 года выпуска. Это более пяти лет назад. Про IE вообще уже даже упоминать не стоит.

Нормальный вариант - забить.
Если забить нельзя, то заменить object-fit на background-size. Его даже IE с 8 версии понимает. Понятно, что картинки переносим в фон.

На CSS решения я не знаю. И, вероятно, его нет вовсе.

Остается javascript. берем переполняемый элемент и сравниваем его две метрики

if (el.scrollHeight > el.offsetHeight) {
  // Есть переполнение
}

Аналогично для ширины, если нужно.

правый верхний угол => значит так и нужно писать

.notys {
  right: 0; // СПРАВА
  top: 0; // СВЕРХУ

  max-width: 90%; // На всякий случай ограничить процентами ширину.
}

https://developer.mozilla.org/ru/docs/Web/CSS/line...

Line-height в процентах рассчитывается от размера шрифта самого элемента.
Если у элемента font-size=16px (явно задан или рассчитан на основе наследования, не важно)
То для того, чтобы задать line-height=24px нужно указать
line-height: 150%;

Line-height – это расстояние между базовыми линиями соседних строк.

UPD
Лично я не люблю относительные величины в line-height. Предпочитаю указывать безразмерный множитель. С ним не бывает никаких неожиданностей. И пишется короче.
Если брать пример выше, то

line-height: 1.5;

Зачем repeat здесь?

grid-template-columns: 30% 70%;

Высоту активного слайда нужно взять дефолтной.
Остальные слайды трансформировать transform: scale()

Я не помню точно, какие там классы у слайдов, но примерно будут такие стили:

.slick-slide {
  transform: scale(0.8);
  transition: transform 0.8s ease;
}
.slick-active {
  transform: scale(1);
}
.slick-active + .slick-slide {
  transform: scale(0.9);
}
.slick-active + .slick-slide ~ .slick-slide {
  transform: scale(0.7);
}