ForSureN1

document.querySelectorAll('.title.region')

Проще всего поставить картинку абсолютом с right: 0; bottom: 0, так же дать ей object-fit: contain, и ограничить по max-width и max-height

.img-class {
position: absolute;
right: 0;
bottom: 0;
max-width: 300px;
max-height: 300px;
width: auto;
height: auto;
object-fit: contain;
}

dataset и getAttribute, почитайте про эти два метода, и разберетесь сами :)

Смотрите какая ситуация получается, к примеру на десктопе 1 слайд имеет 6 фотографий, на макете у нас +- 15 слайдов, соответственно каждый будет иметь так же по 6 фотографий, итого у нас 90 фотографий в слайдере, на мобилке, в 1 слайде будет 1 фотография, соответственно будет 90 слайдов, от dots мы уже отказываемся либо ограничиваем их количество, тогда какой в них смысл, и так у нас 2 варианта, либо мы в мобилке даем display: none, для вторичных фотографий, то есть из 6 фото мы скрываем 5, и оставляем самую главную, либо же в мобилке мы опять же в главную фотографию прячем остальные 5, и с помощью фэнсибокса уже можем продемонстрировать остальные, как то так

а что непонятного ? через elem.style.width и elem.style.height меняй размеры изображения

Разобрался собственно сам, запутался в вызовах тайм аута, и вынес в отдельную функцию которая при index === array.lenght очищает все классы, и опять же вызывает сама себя :)

let preloadImg = document.querySelectorAll('.pr-bub');

let arrayBub = Array.from(preloadImg)

let reverseArray = arrayBub.reverse();

function setClassBub() {
    reverseArray.forEach((bub, index) => {
        setTimeout(() => {
            bub.classList.add('animationPreBub')
            if (index === (reverseArray.length - 1)) {
                setTimeout(() => {
                    reverseArray.forEach((item) => {
                        item.classList.remove('animationPreBub')
                    })
                }, 200)

                setClassBub();
            }
        }, 300 * (index + 1))
    })
}

setClassBub();

Ну думаю что здесь все очень просто, задняя линия это по факту клон кнопки, только с белой заливкой, делаем ее через before, и даем ширину в 90% , соответственно она будет автоматически уменьшаться относительно главной кнопки, для верхнего svg элемента мы так же можем обернуть в див, и ему уже дать белый фон, чтобы перекрывал линию, либо же еще проще вариант просто вытащить ее в jpg, где уже будет этот белый фон, ну а нижняя svg вообще не составляет каких либо проблем, думаю смог бы сделать эту кнопку за ~5 минут

Вам бы сначала разобраться в свойствах display , а потом уже переходить к другим запросам

Так это же самые обычные табы? Нет ?

Решил проблему сбросом стандартных стилей "-webkit-appearance: none;"

Как вариант изначально поместить его в правую колонку, и дать position absolute, дать ему left: -50%, и уже когда нужно будет, просто задаете ему position static и он вернется в свою колонку

let nav = d.querySelector('.nav')
nav.addEventListener('click', activeTabs)
function activeTabs(e) {
let items = d.querySelectorAll('.nav-item')
const target = e.target 
if (target.classList.contains('nav-item') {
 target.classList.add('active');
}
items.forEach(item => {
item.classList.remove('active')
})
}

Знаю ребят, которые с нулевыми знаниями в JS , работают на Reacte, такая практика конечно плоха, но все же иногда встречается, поэтому лучше задать ваш вопрос немного иначе, нужен ли вам вообще этот фреймворк, на нативном JSe можно делать много крутых вещей, очень часто встречаю данную фразу: "Станьте для начала JavaScript разработчиком, а потом уже выбирайте фреймворк(если он вам конечно нужен будет)"

С большой уверенностью могу предположить что проблема кроется в плагине, который передвигает карточки, + у них абсолютное позиционирование, может быть в какой то версии браузера что то не поддерживается, и из за этого все плывет.
P.S. у родителя карточек задана фиксированная высота, я думаю что в мобилке она каким то образом не правильно высчитывается, и начинает все ломаться из за этого

Добро пожаловать в мир парсинга