Николай

Просто запрос в гугл сначала делайте и будет меньше вопросов)))
Вот например, первое что выдало)

Может это или это поможет вам?!

Или так:

let tabs = document.querySelectorAll('.number'), // Ваши цифры.
		squares = document.querySelectorAll('.square'); // Ваши квадраты.

	for (let i = 0; i < tabs.length; i++) {
		const tab = tabs[i];

		tab.addEventListener('click', function() {
			for (let j = 0; j < squares.length; j++) {
				const square = squares[j];

				square.classList.remove('is-active'); // Убираем у всех активный класс.

				if (i === j) square.classList.add('is-active'); // Добавляем активный класс квадрату по выбранному номеру.
			};
		});
	};

Попробуйте поиграть с z-index, например, 1 который показывается, остальным 0
Так как самый нижний блок в верстке оказывается сверху, поэтому возможно, на других hover не действовать

вы transition уберите вовсе с этого кружка и будет не лагать.
То есть: transition: all 0s linear;

И почему бы не облегчить тем, что сделать точку внутри блока псевдоэлементом, тогда и стили передвижения курсора можно будет передавать только одному блоку, а не двум как сейчас?!

играйте с max-height сначала нулевое скрытому блоку, а при клике либо класс подставлять ему, который max-height увеличит или просто style прописать скриптом.

Может это?!

Если у блока нет внутренних отступов, например padding, то хорошо сыграет комбинация (добавить), когда он еще закрыт:

.hidden-block {
 overflow: hidden;
 max-height: 0;
}

А чтобы открылся просто max-height увеличить или по известной высоте, или примерно)) Так он плавно раскроется.

Нашёл способ, пока что, как починить боковой скролл:

.calc_table {
    width: 100%;
    overflow-x: scroll;
}

.calc_title > div, .calc_row > div {
  flex-shrink: 0;
  flex-grow: 0;
}

И может это поможет, правильно создать и стилизовать выпадающие списки, возможно и с пропаданием списка решится вопрос.

Такое чувство, что при нажатии пальца (touch событие), то блокируется его любое действие, например, event.preventDefault();

Ну наверное, у центральной карточки есть, какой-то класс активации, например active, почему бы от него и не плясать в стилях?
Например, что-то в этом роде .item.active img { transform: scale(1.2) }

Возможно, вам подойдет это: вариант?!

псевдоэлементом внутреннюю точку сделай да и всё)

попробуй просто display: flex

Какой телефон? Код нужен или то, где глянуть можно, чтобы понять вашу суть вопроса?!

В принципе, подключаются как и при обычном css
Погляди тут https://codepen.io/juanbrujo/pen/RNLMza