Alex

.loading {
  --percent: 10%;
  background: linear-gradient(90deg, rgba(0,200,0,1) var(--percent), rgba(255,255,255,1) var(--percent)); 
}

1. Универсальный класс для контейнера с кнопками. В нем предполагается любое количество кнопок и все они равномерно растянуты на всю ширину контейнера. Это ваши группы.
   
2. Шапку делаете как хотите. В неё ложите любое количество груб кнопок. В шапке указываете gap чтобы визуально отделить группы.
   
   

Попробуйте
.faq_1:hover + .in_faq_1{

Я так не делаю. Но справедливости ради отмечу, что не занимаюсь версткой прям 24/7. Предпочитаю максимально сокращать количество элементов на странице, в том числе за счет div. А то потом встаёт вопрос производительности, ты смотришь на страницу, а там 1500 DOM узлов и треть из них дивы, которые можно было бы выбросить.
Если коротко, мой ответ таков:
Старайтесь не использовать div вообще. Только, если без него никак не получится правильно спозиционировать какой-то элемент.

.input:focus-within {
  border: ...
}

Ну, скрольте немного вверх ... Юзайте для этого JS. Всё что могу сказать исходя их вопроса

Вот точно так же как вы меняете фон, только менять цвет

Alex, есть карточка, при клики на нее, открывается полная ее версия, и у этой карточки есть лайк. Так вот когда я лайк ставлю, у меня открывается полная карточка и ставится лайк, а мне нужно только лайк

В обработчике клика по кнопке лайк, нужно добавить вызов stopPropagation

Я думаю примерно так:

1. Берем картинку телефона помещаем её в какой-то контейнер
   
2. На фон контейнера ставим кружки (только кружки). По моему это можно сделать градиентом и не парится с картинкой
   
3. Выравниваем их так, чтобы телефон всегда совпадал с кружками, чтобы они масштабировались вместе
   
4. Отдельно на секцию под кружками бахнуть зеленый градиент