ImagineTables

Как уже было сказано выше,

1. Брякпоинты из любимого фреймворка (чем стандартнее, тем лучше), плюс
2. Точечные фиксы для конкретных кусков, ломающиеся так далеко от брейкпоинтов (посередине, например), что на них не натянуть.

Декларативно (на pure CSS) можно сделать что-то типа такого:

body:has(.first-block:hover) .second-block
{
    background: red;
}

И неважно, где эти блоки и как связаны. :hover можно заменить на другой псевдокласс, обозначающий взаимодействие с юзером, например :active или :focus-visible.

Но для кликов лучше прибегнуть к императивному скрипту (используется jQuery):

$('.first-block').on('click', () => $('.second-block').addClass('red');

И, само собой, CSS:

.red
{
    background: red;
}

для маркера checkbox навешен transition для плавного появления

Это плохой UX, не надо так делать. Ощущаться будет как замедленная реакция интерфейса на нажатие.

Но если приспичило, можно:

Первый вариант
1. Описать галку в начале файла:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="template">
	<defs>
		<symbol id="checkmark" class="checkmark" viewBox="0 0 16 16">
			<path fill="currentColor" … />
		</symbol>
	</defs>
</svg>

2. Вставить в кнопку:

<svg width="32" height="32"><use href="#checkmark"></use></svg>

3. Анимировать прозрачность.

Второй вариант

Если хочется сохранить растровое изображение, используйте его как маску (clip), а фон заливайте сплошным цветом. Если использовать кастомные свойства, ими можно анимировать хоть градиенты:

@property --my-color-1
{
	syntax: '<color>';
	initial-value: #000;
	inherits: false;
}