Антон Романков

Если я правильно понял вопрос, то вам нужен mini-css-extract-plugin, который сможет добавить hash к имени файла
https://webpack.js.org/plugins/mini-css-extract-pl...

.previous {
  &:hover:before {
    background-color: red;
  }
}

htmlbook.ru/practical/krugovaya-diagramma
Тут описано, как это делать

А почему бы не реализовать так, чтобы тултип уже был в нужной позиции, а управлять надо было бы только его opacity и translateX? Тогда такой проблемы не будет.

https://codepen.io/romant094/pen/mdxVaeo
вот так

Это делается в функции onSubmit, которая вешается на форму.
Например, есть есть обработчик, который отвечает за отправку данных на сервер и onSubmit. Тогда можно сделать так:

const sendForm = async (data) => await api.post(data)

const onSubmit = async (data) => {
  // добавить сюда получение данных из формы
  try {
    const res = await sendForm(data)
    document.querySelector('#your-form').classList.add('active')
  } catch (error) {
    console.error(error)
  }
}

Наверное, задать onclick

Дело в свойстве max-height, которое ограничивает высоту. Паддинги остаются, но они вне "вьюпорта" этого блока. Попробуйте добавить overflow: auto и проскроллить до конца. Вы найдете ваших потеряшек :-)

Например, так

Я бы делал картинкой. Реализовать точь-в-точь не уверен, что возможно.
Либо искать какую-то JS либу, которая сделает анимированным фон.

Стили для контейнера

display: flex;
flex-wrap: wrap;

Стили для потомков
flex: 1 0 50%;

https://codepen.io/romant094/pen/jOZmaJg
Набросал пример, но надо поиграться со значениями

Вот тут ситуация похожая.
https://stackoverflow.com/questions/43707076/how-d...

Но в вашем случае, не уверен, что поможет. Проблема во флоатах. Рекомендую переписать на флексах. Флоаты — это сильно устаревшая технология, ее никто не использует сейчас.

Ну и по стилю кода, лучше использовать классы, а не id.

Обратите внимание на то, как сделана верстка. Добавил скрин, чтобы продемонстрировать, как ведут себя элементы. Красная обводка — это ul, черная — li.



Набросал, как это может быть: https://codepen.io/romant094/pen/ZEagLWz

Если анимация этих элементов не нужна, то я бы весь фон картинкой сделал.
Если они должны как-то себя вести (следовать за мышью, увеличиваться при наведении и проч), то однозначно элементами с абсолютным позиционированием.

Я бы сделал по контейнеру на каждую линию и прописал бы для каждой css:

display: flex;
gap: 10px;
flex-wrap: wrap;

Также надо прописать для каждого элемента стили, отвечающие за ширину.
flex: 1 0 300px;

Либо сделать сетку, как в бутстрапе, например.

padding: 0 10px;
width: 25%;
media screen and (max-width: 992px) {
    padding: 0;
    width: 100%;
}

Чтобы 3 изображения вставить, вам надо их позиционировать абсолютом.
Но надо ли? Не проще ли взять из макета уже целое изображение? В фигме это делается на 1-2-3

Может, проще будет сразу готовый взять?
https://freefrontend.com/css-hamburger-menu-icons/

Свойство display не анимируется. Используйте для этой цели transform rotate, height, opacity и проч

Вот тут расписано, как )
https://intellij-support.jetbrains.com/hc/en-us/co...