Андрей Гончаров

В css у #my-slider убери жесткую ширину, вообще сотри эту строку

Я бы наложил svg в виде дуги абсолютно.

1) Опасно! тебе дают доступ не только "read only", тогда ты сможешь работать с тем же документом одновременно с другими (и портить их работу тоже).
2) Ты открыл ссылку с read only макетом - сверху посредине есть выпадашка, откуда ты можешь копировать макет к себе а аккаунт фигмы. И уже там работать с ним как тебе хочется.

$(document).ready(function () {
	$('iframe').wrap('<div class="XXX"></div>');
});

Скорее всего, дело в бесплатном хостинге (сильно ограниченных ресурсах) и не оптимизированным коде вп с расширениями. Хостинг ложится от превышения допустимых нагрузок на цп\бд.
В любом случае можно задать вопрос тп хостинга - они точнее скажут почему ложится сервер.

Я сделал решение только конечного числа заранее известных массивов из твоего примера. Можно улучшить, чтобы больше автоматизировать, но работает на твоих данных из вопроса:

const A = [{category: "Walls", id: "1"}, {category: "Walls", id: "2"}];
const B = [{category: "Window", id: "3"}, {category: "Walls", id: "4"}];
const C = [{category: "Walls", id: "5"}, {category: "Floor", id: "6"}];
const D = [{category: "Walls", id: "5"}, {category: "Walls", id: "6"}];

let newArr = [];
newArr['Walls'] = [];
newArr['Window'] = [];
newArr['Floor'] = [];

const allArr = {'A':A,'B':B,'C':C,'D':D};

for (let key in allArr) {
	allArr[key].forEach(function (item) {
		let tempItem = {'id': item.id, 'class': key};
		newArr[item.category].push(tempItem);
	});
}

for (let key in newArr) {
	let section = $('<details></details>');
	let summary = $('<summary>'+key+'</summary>');

	section.appendTo('body');
	section.append(summary);

	newArr[key].forEach(function (item) {
		console.log(item);
		let newElement = $('<button class="'+item.class+'">'+item.id+'</button>');
		section.append(newElement);
	})
}

@media all and (min-width: 1024px) {
    .button{
      display: none;
    }
}

блочный элемент заменить на строчно-блочный (inline-block,inline-flext)

Есть. Стилизовать через

.main>div:nth-of-type(n) .rating{
  xxx
}

Вероятно, когда приложение начинает грузить картинку браузер не знает размеров пикчи. А когда оно уже загружено, то бразуер соответственно адекватно реагирует на ее изменение.
Я предположу, что тебе надо загружать пикчу в объект js, а уже по колбеку ее загрузки вставлять его в дом. Ну или как-то отслеживать, чтобы картинка была загружена перед вставкой в дом ее.

Там же просто пнгшки. Одна стоит на фоне типа стол и комп, остальные меняются друг с другом по css кейфреймам. Даже без js похоже.