Cheizer

Можно хексом, если заменить решетку на %23
stroke='%23f00'

В вашем варианте с svg можно добавить rx='20':



Будет тоже не идеально, но ближе к нужному результату.

Задать переменную mapsArr, которую вы используете в виде массива.
var mapsArr = [];

https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...
Я бы советовал прочитать термин grid и сразу же переходить к коду, там вы сразу всё поймёте, будут вопросы задавайте, помогу))

Держи)) https://codepen.io/ed_s/pen/jOWzwrq

Если я правильно вас понял и вам нужен клик каждый раз при смене слайда, то так:
1. В api находим метод mySwiper.on(event, handler).
2. Переходим в раздел событий. Вас интересует событие slideChange.
3. Пишем обработчик. Он будет запускаться каждый раз, когда слайдер меняет слайд.

Попробуйте добавить в параметры слайдера:

observer: true,
observeParents: true

Тогда при открытии вкладки, слайдер будет инициализироваться.

Можете подробнее глянуть в документации: https://swiperjs.com/api/

Вообще-то на CSS можно без проблем такое сделать. По пути наименьшего сопротивления → на гридах с параметром 1fr для шаблона по высоте. На флексбоксах тоже такое можно муткануть, но не так приятно, как на гридах.

А на JS надо брать размер элемента, можно сразу три, чтобы сравнивать и брать больший, а затем присваивать его всем в качестве min-height (иначе при перерасчетах он будет всегда фикс высоту выдавать).

Желательно это все завернуть в функцию, которую вызвать при инициации скрипта И запустить в вотчере события изменения размера окна.

В современном CSS есть замечательная штука - clip-path, которая позволяет сделать элемент нужной формы. В контексте вашей задачи это решение гораздо надежнее хаков с градиентами, т.к. будет по-настоящему тянуться на любую высоту (правда IE эту красоту не поддерживает):

Можно и без гридов, используй flex-wrap и order

Если таргетинг по ip, то запрет трекинга, чистка кук и т.п не поможет.
Если же при этом нужно ещё чтоб и реклама продолжала показываться, то остаётся только TOR/VPN. Если реклама не нужна, то можно просто заблокировать рекламу (проще всего в браузере плагином uBlock, ну или глобально через роутер, как выше писали)

Firefox или safari и запретить трекинг.

adguard расширение поставить и настроить
в роутер настроить dns от adguard

Класс, который вам посоветовали, определяет еще кучу разных параметров. Конечно, лучше использовать его.
Если хотите на js, то на странице Mobile-Detect'а есть форки для js.

function getGridSize() {
  const w = window.innerWidth;
  return [ 500, 700, 1225, Infinity ].findIndex(n => n > w) + 1;
}

Или

function getGridSize() {
  const w = window.innerWidth;
  return [
    { size: 1, maxWidth: 500 },
    { size: 2, maxWidth: 700 },
    { size: 3, maxWidth: 1225 },
    { size: 4, maxWidth: Infinity },
  ].find(n => n.maxWidth > w).size;
}

function getGridSize() {
  var iW = $window.innerWidth();
  
    if (iW < 1225 && iW > 700) {
    return 3
  }else if(iw >= 500 && iw <= 700){
 return 2;
} else if (iW < 500) {
    return 1
  } else if (iW >= 1225) {
    return 4
  }
  
}