Здравствуйте. Есть блок product-card использующийся в каталоге и в слайдере на разных страницах. Имеет структуру

                        .card-add-product
                            .card-add-product__index 
                            .card-add-product__inner
                              .card-add-product__title
                              .card-add-product__descr
                            .card-add-product__thumb
                               img.form-group__img(src= obj.img)

Но в слайдере, мне нужно его немного изменить. Ограничить высоту, дать немного другие паддинги для .card-add-product__inner, изменить максимальные размеры изображения и т.п.

Я делаю это миксом через блок product-slider

                                 .product-slider__card.card-add-product
                                    .card-add-product__index
                                    .product-slider__inner.card-add-product__inner
                                        .card-add-product__title
                                        .product-slider__descr.card-add-product__descr
                                    .product-slider__thumb.card-add-product__thumb
                                        img.form-group__img(src= obj.img)

Так же можно было бы сделать модификаторы. И вроде как это соответствует БЭМ. Но давайте возьмем ситуацию, когда пройдет достаточно много времени и структура забудется либо проект будет поддерживать другой человек, который может быть незнаком с БЭМ. Ему нужно будет изменить цвет фона в карточке каталога. Он зайдет, посмотрит структуру и напишет в css.

.card-add-product {
  background: red;
}

И уйдет довольный работой. Даже не узнав, что на другой странице в слайдере бэкграунд тоже поменялся. А когда потом это обнаружится ему нужно будет прописывать для

.product-slider__card {
background: white;
}

А это уже двойная работа и неудобства, т.к. таких моментов может всплыть множество.

Как правильно было бы избежать такой ситуации, без дублирования кода и возможно ли вообще?