spnq

Зависит от браузера.
В статье все красиво и понятно в графиках.

Если именно JQuery, то toggleClass. Как навесить ивент, надеюсь, что знаешь.

Из родительского контейнера можешь ее вынести и поставить width: 100vw на класс yandex-map

Так в div, в который зачем-то обернут figure, блоковый

Для разных экранов с помощью медиа-запросов задаешь разные размеры для картинки. Лучше через относительные единицы, а не px.

Для этого существует единица размера vh (viewport height).
100vh = 100% экрана.
Тоже самое для vw (viewport width).
Только мета-тег в head добавить не забудь:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Это значит 0.7rem
Ноль можно просто опустить.
Работает со всеми единицами, не только rem.

Почитай про media. Плюс вместо пикселей используй vw, vh, rem, em.
Ну и проще будет использовать для позиционирования flex-box и grid.

Можно попробовать каждое слово пихнуть в <p> и добить в css:

p {
  text-align: justify;
  font-size: 5.5vw;
}

p:after {
  content: "";
  display: inline-block;
  width: 100%;
}

vw это viewport width, т.е. ширина экрана пользователя, в данном случае размер текста будет равен 5.5% от ширины экрана.
Но для таких вещей уже есть готовые библиотеки, например fittextjs.com