Как избавиться от длинного имени класса БЭМ?
Необходимо гранулярнее делить на блоки, тогда часть специфичной семантики из названия элемента уедет в новый блок (что укоротит вложенные элементы). 

Текстовая часть напрашивается быть независимым блоком, причем, маркированным списком. Например, структура может быть такой:
.advantages-card (&--reversed)
    &__description // текстовая часть
    &__picture

.bullet-list
    &__item
    &__item-heading
    &__item-description
То есть в разметке это будет что-то вроде:
<div class="advantages-card">
  <ul class="bullet-list advantages-card__description">
    <li class="bullet-list__item">
      <header class="bullet-list__item-heading">User Journey</header>
      <p class="bullet-list__item-description">Description long text</p>
    </il>
  </ul>
  <img class="advantages-card__picture" :src="block.imgURL">
</div>

Кроме того, я бы рекомендовал избегать сокращения "description" в "desc", потому что туда идеально укладывается не менее популярный термин "descending".
Дай релевантное название блоку.  Я вижу ты называешь блок по названию изображения. 

Называть блоки стоит из ответа на вопрос: Что это ? У тебя это блок или block. Если есть индивидуальные стили для блока - добавляй новый класс