Уникальная стилизация секций

Видеоинструкция:

Код для накидывания классов (должен быть внизу):

<script>
Array.from(document.querySelectorAll('.add-class')).map((element) => {
  let classToAdd = element.getAttribute('data-class');
  element.closest('.blocks-section').classList.add(classToAdd)
  })
  Array.from(document.querySelectorAll('.collapse-text-inner')).map((element) => {
  element.innerHTML = element.textContent
  })
</script>

Блок, который нужно вставлять в секцию для задания уникального класса:

<div class="add-class" data-class="two-images"></div>

То, что написано в кавычках в data-class — это название вашего будущего уникального идентификатора вашей секции

Перед вставкой кодов стилизации убедитесь, что у вас есть теги <style>

Например, в уроке я показал код стилизации:

.columns-block .section-main>div>div {
  display:grid;
  grid-template-columns:20% 80%;
}


.two-images .section-main>div>div {
  display:grid;
  grid-template-columns:30% 70%;
}

Этот код написан на языке разметки CSS. Чтобы он заработал в таплинке, создайте html-блок и вставьте туда код, обособив тегами <style> (обратите внимание на их точное написание). Пример кода ниже, который должен вставляться в HTML-блок.

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

<style>
.columns-block .section-main>div>div {
  display:grid;
  grid-template-columns:20% 80%;
}


.two-images .section-main>div>div {
  display:grid;
  grid-template-columns:30% 70%;
}
</style>