Получение JSON нарушает работу веб-сайта и не отображает контент должным образом

У меня есть сайт с большим количеством фотографий. У них один и тот же код с некоторыми изменениями. Я решил, что могу использовать массив с объектами для более удобной визуализации контента без повторного написания одного и того же HTML. Поэтому я написал простой код для .map() объектов и возвращаю строку, а затем .join('') строки. Теперь он отлично работает, используя только JS, но когда я попытался использовать JSON, он как бы сломался. JSON анализируется правильно, и моя функция возвращает правильный код для вставки в HTML, но когда я загружаю страницу, там ничего нет. Я вижу это в инспекторе, но на странице ничего не видно...

Мой код:

const paintingSection = document.querySelector(".painting-div-container");

const loadPictures = (picturesArr) => {
  paintingSection.innerHTML = picturesArr
    .map(
      (picture) =>
        `
<div class = "painting-container ${picture.align} scroll-hidden">
  <div class = "text-container">
    <h3 class = "absolute pain-head">${picture.heading}</h3>
    <p class = "absolute pain-info">${picture.description}</p>
  </div>
    <img
      src = "../../media/obrazy/v-zajeti-barev-2/${picture.fileName}"
      alt = "${picture.alt}"
      class = "painting"
      
    />
</div>
`
    )
    .join("");
};

fetch("./paintings.json")
  .then((response) => {
    if (!response.ok) {
      throw new Error("Network response was not ok " + response.statusText);
    }
    return response.json();
  })
  .then((data) => {
    loadPictures(data);
  })
  .catch((error) => {
    console.error("Error fetching the JSON file:", error);
  });

PS: Я знаю, что HTML не идеален, но я слишком отстой, чтобы сейчас все менять...

JSON:

[
  {
    "heading": "A jako Anděl - 2013",
    "description": "akryl na šepsované desce, 50x60",
    "fileName": "A-JAKO-ANDĚL.jpg",
    "alt": "A jako anděl - obraz",
    "align": "vert"
  },
  {
    "heading": "Barevná láska - 2013",
    "description": "akryl na plátně, 100x130",
    "fileName": "Barevná-láska-2.jpg",
    "alt": "Barevná láska 2 - obraz",
    "align": "hori"
  }
]

Результат, который я получил:

Ожидаемый результат:

Я попробовал console.infoging все, и это правильно. Даже в HTML все так, как должно быть, но отображения в принципе нет. Я получил одну ошибку в другой части моего кода, в которой говорилось, что img не определен. Может быть потому, что он не ждет синтаксического анализа...

HTML, который я получил:

<div class = "painting-container vert scroll-hidden">
  <div class = "text-container">
    <h3 class = "absolute pain-head">A jako Anděl - 2013</h3>
    <p class = "absolute pain-info">akryl na šepsované desce, 50x60</p>
  </div>
    <img src = "../../media/obrazy/v-zajeti-barev-2/A-JAKO-ANDĚL.jpg" alt = "A jako anděl - obraz" class = "painting">
</div>

🤔 А знаете ли вы, что...
JavaScript является одним из трех основных языков веб-разработки, вместе с HTML и CSS.