Уж лучше видео вставляй.
Вот самый простой вариант по таймеру. Можно также по событию load. Так же важно правильно разместить данный код на странице логически подумав учитывая, что страница загружается сверху вниз и js не умеет работать, с не прогрузившимися селекторами.
изменение состояния происходит при разрешении 410px тебе нужно примерно так же сделать, но уже со своими размерами. Пример абстракция, по этому точное расположение кругов по диагоналям блока не высчитывал.
var currentHeight = $('.account').outerHeight(true);
У тебя в этой верстке нет блока с классом account. Я бы циклом пробежался по всем item и нашел максимальную высоту, затем просто бы задал ее всем item.
И этот слайдер уже давно не поддерживается, используй лучше swiper
UPD
Скажем так они есть, но ими не пользуются, некоторые вообще избегают их. Даже для доступности написать формулу лучше в mathml, нежели чем использовать эти тэги. Их стоит использовать скорее для каких нибудь особенностей языков.
Ты увеличил вес селекторов своей вложенностью, это все равно, что прописать !important. Селектор медиа запроса должен быть таким же как и селектор основной верстки.
Фронтендер и бэкендер. Фронт реализует передачу данных на бэк и обработку ответа, бэкендер ловит запрос обращается к базе данных отдает ответ на фронт. Верстальщики если такие есть оформляют, возможно еще вставляют элемент для манипуляции по типу слайдера цен.
Первый вариант верен, но не совсем там есть элемент и он же другой элемент, более правильнее модификатор дать. И как это разные по смыслу? Это списки отображаются они одинаково, то что ты описали решается модификаторами. К тому же во втором варианте элементы одного блока вставлены в элементы другого так делать нельзя.