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

Селект — это один из самых сложных компонентов для реализации и кастомизации. Не получится нативными средствами сделать селект, который будет везде выглядеть одинаково. Нужно делать кастомный.
Можно взять готовый, благо библиотек сейчас предостаточно.

Можно контейнеру задать display: flex, внутренним блокам — flex: 1, а картинку как background поставить и задать ей нужное положение.

Набросал пример: https://codepen.io/romant094/pen/eYxvqeQ

Можно сделать и с помощью одного блока, в котором будет находиться фон, но им сложнее манипулировать, как мне кажется.

Можно скрывать одну картинку и показывать другую через opacity.

<div class="portfolio-card-link">
  <a class="card-link" href="#">
    <img class="image-1" src="./Img and icon/arrowround.svg">
    <img class="image-2" src="./Img and icon/arrow45.svg">
  </a>
</div>

.portfolio-card-link .card-link img {
  transition: opacity 0.3s ease; /* Добавляем плавный переход */
}

.portfolio-card-link .card-link .image-2 {
  opacity: 0; /* Начальная прозрачность для второго изображения */
}

.portfolio-card-link:hover .card-link .image-1 {
  opacity: 0; /* При наведении на блок, первое изображение становится прозрачным */
}

.portfolio-card-link:hover .card-link .image-2 {
  opacity: 1; /* При наведении на блок, второе изображение становится непрозрачным */
}

Самое простое — таблицей, на мой взгляд

Можно использовать transform: rotate + translate.
Пример тут:
https://codepen.io/romant094/pen/eYQxPPL

Почему бы webpack или gulp не настроить для это цели?

Можно вот этот, проверил, вроде все ок.
https://www.toptal.com/developers/cssminifier

Я бы чуть изменил структуру. Так будет в разы проще манипулировать стилями.
https://codepen.io/romant094/pen/BaGMqYQ

Обычный блок с background-image

Лучше такое на гридах делать. Если флексы, то проще сделать 2 ряда по 3 элемента, но я так понимаю, что это не совсем то, что вам надо.

https://developer.mozilla.org/en-US/docs/Web/CSS/:has
Также можно использовать :not:has
только обратите внимание на поддержку браузеров

.parent {
  display: flex;
}

.child {
  flex: 1;
}

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

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

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

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

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

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