ANKU

Оберни эти 2 дива одним дивом, потом новому родителю допили стили
Код вставляй через Настройки сайта

function wrapElements(selectors, wrapperTag = 'div', wrapperClass) {
  const elems = selectors
    .map(sel => document.querySelector(sel))
    .filter(el => el !== null);
  if (elems.length < 2) {
    console.warn('Не все элементы найдены');
    return null;
  }
  const parent = elems[0].parentNode;
  if (!elems.every(el => el.parentNode === parent)) {
    console.warn('Элементы не соседи');
    return null;
  }
  const children = Array.from(parent.children);
  const sorted = elems.slice().sort(
    (a, b) => children.indexOf(a) - children.indexOf(b)
  );
  const wrapper = document.createElement(wrapperTag);
  if (wrapperClass) wrapper.classList.add(wrapperClass);
  parent.insertBefore(wrapper, sorted[0]);
  sorted.forEach(el => wrapper.appendChild(el));
  return wrapper;
}
wrapElements(['.div-1', '.div-2'], 'div', 'my-wrapper');

Сверстать карточки руками
Забиваешь товары в поток, подцепляешься к апи товаров, вставляешь свою верстку в js, выводишь данные на клиенте (собственно так тильда и делает). В своей верстке просто на кнопку вызываешь форму, через js передаешь параметры товара (цена/название), а не корзину (хотя корзина та же форма, просто чисти ее при закрытии), тем более что ты собрался передавать название товара в форму, а корзина это делает поумолчанию)))

Держи, скопируй в Т123


Или вот покороче вариант

<script src="https://cdn.jsdelivr.net/gh/shiza7872/My-First-Project/Fluid.js"></script>

<style>
  #renderSurface {
    width: 100%;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: -1;
  }
</style>
<canvas id="renderSurface"></canvas>

<script>
  const canvas = document.getElementById('renderSurface');
  let myFluid = new Fluid(canvas);
  myFluid.activate();
</script>

Чтобы дать точный ответ, надо увидеть макет формы.
Но должно быть что-то типа
V1 - jQuery

$(document).ready(() => {
  // Все элементы с классом img-N
  $('[class*="img-"]').on('click', function() {
    const $img = $(this);
    // Среди классов img-<число>
    const imgClass = $img.attr('class')
      .split(/\s+/)
      .find(c => /^img-\d+$/.test(c));
    if (!imgClass) return;

    const idx = imgClass.split('-')[1];
    const $checkbox = $(`input[name="check-${idx}"]`);
    if (!$checkbox.length) return;

    // Тогглим класс и состояние чекбокса
    const isActive = $img.toggleClass('active').hasClass('active');
    $checkbox.prop('checked', isActive);
  });
});

V2 - Vanilla

document.addEventListener('DOMContentLoaded', () => {
  // Все элементы с классом img-N
  const images = document.querySelectorAll('[class*="img-"]');

  images.forEach(img => {
    img.addEventListener('click', () => {
      // Класс вида img-N
      const imgClass = img.className
        .split(/\s+/)
        .find(c => /^img-\d+$/.test(c));
      if (!imgClass) return;

      const idx = imgClass.split('-')[1];
      const checkbox = document.querySelector(`input[name="check-${idx}"]`);
      if (!checkbox) return;

      // Тогглим класс и состояние чекбокса
      const isActive = img.classList.toggle('active');
      checkbox.checked = isActive;
    });
  });
});

Тильдовскую капчу дернуть не получится прямым способом, придется накостылить, типа поставить форму, дать ей d-none, на клик по "показать номер" повесить сабмит скрытой формы, если форма отправится, то показать номер, либо форма выявит подозрительную активность и выплюнет родную капчу, в этот момент можно будет отправить событие, например в метрику, что капча сработала, если ее ввели, так же можно отправить событие.

Из текста вопроса не понял, капчу показывать каждый раз при запросе номера или нет?
Нужна v2 или v3
Какая цель сего действа?
Ну и пи своей капче надо сервер, чтоб валидировать токен
Ну и телефоны там же в дб хранить, чтоб отдавать во фронт
Если будешь хранить в html, типа в base64, например , то любой бот, который запускает js, моментально декодирует его, тем более если бот будет кликать по js кнопке "показать номер"

Вопрос ты задал не совсем правильно, но кажется я понял в чем суть))
Тебе необходимо, чтобы слайдер был в рамказ стандартного контейнера, а не на всю ширину окна браузера.
В примере по ссылке есть строчка [class*="uc-run-logo"] .t774__container
там определена ширина контейнера max-width: calc(100vw - var(--dbmSliderRunPadding) * 2);
Впиши вместо этого

[class*="uc-run-logo"] .t774__container {
  max-width: 1160px;
}
@media screen and (max-width: 1200px) {
  {
    max-width: 940px;
  }
}
@media screen and (max-width: 960px) {
  {
    max-width: 620px;
  }
}
@media screen and (max-width: 640px) {
  {
    max-width: 460px;
  }
}
@media screen and (max-width: 480px) {
  {
    max-width: max-width: calc(100% - 40px);
  }
}