Как я могу скопировать идентификатор из div в идентификатор CSS?

Ваш код будет работать, как только вы удалите .test из кода jQuery, поскольку в вашем div нет этого класса.

Также в CSS вы должны указать правильный путь к фоновому изображению, чтобы оно работало.

Пример рабочего кода: (с жестким идентификатором кода и использованием цвета фона, чтобы показать вам, что он работает.)

$(document).ready(function() {
  $(".card").each(function() {
    var id = $(this).attr('id');
    var style = $(this).find('style').html();
    style = style.replace(/#id-placeholder/g, '#' + id);
    $(this).find('style').html(style);
  });
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id = "card-1" class = "card flex-card radius-lg rel bgcolor ${card.cardTheme}" role = "region" tabindex = "-1" style = "height:100px;width:100px;">
  <sly data-sly-test.isImageTheme = "${card.cardTheme == 'theme-light-bg-img' || card.cardTheme == 'theme-dark-bg-img'}">
    <style data-sly-test = "${isImageTheme}">
      @media (min-width:1025px) {
        #id-placeholder {
          background-image: url(${card.imageLifestyle @ context='attribute'});
          background: green;
          background-size: cover;
          background-position: bottom right;
        }
      }
      
      @media (min-width:768px) and (max-width:1024px) {
        #id-placeholder {
          background: green;
          background-size: cover;
          background-position: bottom right;
        }
      }
      
      @media (max-width:767px) {
        #id-placeholder {
          background-image: url(${card.imageLifestyleMobile @ context='attribute'});
          background-size: cover;
          background-position: bottom right;
        }
      }
    </style>
  </sly>

Изменение CSS для указания идентификатора непосредственно в HTML — не лучшая идея.

Вместо этого вы можете объединить возможности переменных CSS и атрибута style, чтобы определить изображение для каждого размера.

Затем вы можете получить доступ к этим переменным в своем CSS и применить стили, общие для всех ваших карточек.

Переменная css может использоваться для изменения стиля во время выполнения и может быть установлена ​​непосредственно в элементе. Вы можете идентифицировать переменную CSS, поскольку она начинается с --.

Обратите внимание, что я не знаком с AEM или Sightly, поэтому следующий пример используется только в качестве демонстрации.

Сначала мы добавим класс, который будет использоваться для применения стиля ко всем карточкам. Здесь я буду использовать my-responsive-card.

<div id = "${card.id}" 
     class = "card flex-card radius-lg rel bgcolor ${card.cardTheme} my-responsive-card" 
     role = "region" 
     tabindex = "-1">
  <!-- ... --> 
</div>

<style>
.my-responsive-card {
  background-size: cover;
  background-position: bottom right;
}
</style>

Затем мы можем использовать атрибут style для определения трех переменных CSS, по одной для каждого размера изображения. Давайте использовать --image-desktop, --image-tablet и --image-mobile.

Эту переменную можно определить как любое другое свойство CSS:

<div id = "${card.id}" 
  class = "card flex-card radius-lg rel bgcolor ${card.cardTheme} my-responsive-card" 
  role = "region" 
  tabindex = "-1" 
  style = "--image-desktop: ${card.imageLifestyle @ context='attribute'}; --image-tablet: ${card.imageLifestyleTablet @ context='attribute'}; --image-mobile: ${card.imageLifestyleMobile @ context='attribute'}">
  <!-- ... --> 
</div>

<style>
.my-responsive-card {
  background-size: cover;
  background-position: bottom right;
}
</style>

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

Чтобы получить доступ к переменной css, вам нужно использовать функцию var() css.

<div id = "${card.id}" 
  class = "card flex-card radius-lg rel bgcolor ${card.cardTheme} my-responsive-card" 
  role = "region" 
  tabindex = "-1" 
  style = "--image-desktop: ${card.imageLifestyle @ context='attribute'}; --image-tablet: ${card.imageLifestyleTablet @ context='attribute'}; --image-mobile: ${card.imageLifestyleMobile @ context='attribute'}">
  <!-- ... --> 
</div>

<style>
.my-responsive-card {
  background-image: var(--image-desktop); 
  background-size: cover;
  background-position: bottom right;
} 

@media (min-width:768px) and (max-width:1024px) {
  .my-responsive-card {
    background-image: var(--image-tablet); 
  }
}
                         
@media (max-width:767px) {
  .my-responsive-card {
    background-image: var(--image-mobile); 
  }
}

</style>

Обратите внимание, что ваше первое условие медиазапроса не является обязательным, поскольку оно является значением по умолчанию.

Вы также можете использовать переменные Sightly/HTL для визуализации идентификаторов:

<div id = "${card.id}" class = "card flex-card radius-lg rel bgcolor ${card.cardTheme}"
                  role = "region" tabindex = "-1">
                  <sly data-sly-test.isImageTheme = "${card.cardTheme == 'theme-light-bg-img' || card.cardTheme == 'theme-dark-bg-img'}">
                      <style data-sly-test = "${isImageTheme}">
                          @media (min-width:1025px) {
                            #${card.id} {
                              background-image: url(${card.imageLifestyle @ context='attribute'});
                              background-size: cover;
                              background-position: bottom right;
                            }
                          }
                          @media (min-width:768px) and (max-width:1024px) {
                            #${card.id} {
                              background-image: url(${card.imageLifestyleTablet @ context='attribute'});
                              background-size: cover;
                              background-position: bottom right;
                            }
                          }
                          @media (max-width:767px) {
                            #${card.id} {
                              background-image: url(${card.imageLifestyleMobile @ context='attribute'});
                              background-size: cover;
                              background-position: bottom right;
                            }
                          }
                      </style>
                  </sly>

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

<style data-sly-test = "${isImageTheme}">
.card .theme-light-bg-img, .card .theme-dark-bg-img {
    background-size: cover;
    background-position: bottom right;
}
@media (min-width:1025px) {
    .card .theme-light-bg-img, .card .theme-dark-bg-img {
        background-image: url(attr('data-backgroundImage'));

    }
}
@media (min-width:768px) and (max-width:1024px) {
    .card .theme-light-bg-img, .card .theme-dark-bg-img {
        background-image: url(attr('data-backgroundImageTablet'));

    }
}
@media (max-width:767px) {
    .card .theme-light-bg-img, .card .theme-dark-bg-img {
        background-image: url(attr('data-backgroundImageMobile'));

    }
}
</style>

и HTML будет выглядеть так:

<div id = "${card.id}" class = "card flex-card radius-lg rel bgcolor ${card.cardTheme}" role = "region" tabindex = "-1"
     data-backgroundImage = "${card.imageLifestyle @ context='attribute'}"
     data-backgroundImageTablet = "${card.imageLifestyleTablet @ context='attribute'}"
     data-backgroundImageMobile = "${card.imageLifestyleMobile @ context='attribute'}">
...
</div>