Как адаптировать динамически позицанированные элементы которые сделаны с помощью css transform: translate под мобилу?

Я хотел создать свой не большой стартап похожий canva.com. Я выбрал в качестве библиотеки Moveable на данный момент я почти закончил свою задумку и вот последний момент сталкунулся с очень интересной и трудной для меня задачей "адаптировать то что я создал под мобильный телефоны". Вы можете сказать в чем тут прикол бери и делай да. Но тут дело в том что я не знаю как это делать. До того писать сюда я просмотрел, перелапатил весь интернет в поисках ответа но ничего такого не нашел.

Оказывается мы не можем исползовать grid, flex либо media queries для элементов которые позицанированы с помощью transform: translate(). Они не будут реагировать никак.

Может тут кто нибудь знает как это можно адаптировать? Или хотябы знает куда нужно идти.

Вообще я сам посмотрел на canva.com и там кажется они используют transform: scale() на весь страницу если это так то это для меня не будет работать потому что мой проект немного подругому работает. Объясняю на моем проекте пользователи создают мини сайты с ограниченными возможностями типа как на тильда но на минималках. Соответственно у меня страница будет по длиннее чем А4 формат и transform: scale() тут вообще не подходит по крайней мере я так думаю. Это мое понимание дел сейчас возможно я не прав. Я оставлю ссылки на ютуб, я заснял несколько видео с экрана ноутбука для того чтобы вопрос был понят более эффективно и что я вообще хочу сделать в итоге думаю это будет более информативно тоже.

Вот как адаптация работает на canva.com https://youtu.be/3DcuAzK9ICw А вот мой проект: https://youtu.be/FLmFSq5P4mQ