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

Мой совет: сделайте нормальный адаптив.
На мобилке блоки можно разместить в колонку. И будет намного лучше.
Ну и горизонтальный скролл — это моветон в 2022.

Либо Masonry использовать, либо переходить на flex.

https://alvarotrigo.com/pagePiling/examples/horizo...

Если я правильно понял вопрос, то вот так

<form data-form="feedback">
  <input type="text" placeholder="Name">
  <input type="text" placeholder="e-mail">
  <input type="submit" value="Send">
</form>

const form = document.querySelector('form')

form.addEventListener('submit', e => {
  e.preventDefault()
  console.log(e.target.dataset.form)
})

Использование готового UI-Kit'a, конечно же, упрощает и ускоряет разработку. Но хочу предупредить, что у MUI есть свои особенности в некоторых местах. Может быть сложно что-то прикрутить.

В целом сложно ответить на этот вопрос словом да или нет. Зависит от потребностей.
Ответьте на вопросы:
- Готова ли компания тратить ресурсы на развитие и поддержку своего собственного UI-Kit'a?
- Что проект получит от стороннего UI-Kit'а?
- В чем преимущества своего UI-Kit'a?

Я бы делал разбиение на модули. Используя scss можно вынести в один файл общие стили и импортировать их там, где надо. Также можно задействовать миксин.
Ну а если на чистом css, то просто выносим общие стили в отдельный файл и линкуем на страницах, на которых это надо.
Что касается названия, то тут it's up to you.

Замените &::before на это

background: linear-gradient(45deg, rgb(80, 106, 245) 45%, rgb(91, 115, 244) 45%);

Вот тут пример: https://codepen.io/romant094/pen/yLKVObg?editors=1100

Если я правильно понял вопрос, то вам нужен 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

Насчет php, не подскажу, но общая логика должна быть такой:
Вы строите данные через массив. Когда юзер кликает на кнопку "Подробнее", то мы знаем индекс элемента массива. Тогда и выводим описание товара по индексу в массиве.
render array
click => index
array[index].description

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

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

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

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

display: flex;
flex-wrap: wrap;

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

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