Как добиться полноценной работы SCSS модулей во Vue 3?

Aetae, должны, конечно, если есть.
И все эти аргументы я и сама могу рассказать.
И тем не менее продолжают появляться ситуации, когда их нет и такой поиск не доставляет удовольствия, мягко выражаясь.

Как сделать “арочный” блок адаптивным?

Красивое решение на гридах для современных браузеров через sibling-index
Но блоки не станут меньше, чем два сдвига. В вашем случае это 100.

.methods__wrap {
  --shift: 50px;
  display: grid;
  grid-template-columns: var(--shift) repeat(4, 1fr var(--shift));
  padding-top: 100px;
}

.methods__item {
  --n: sibling-index();
  grid-column: max(var(--n), calc(2 * var(--n) - 1)) / span 3;
  grid-row: 1/2;
  border-radius: 100vw 100vw 0 0;
}

Как сделать “арочный” блок адаптивным?

frontAng,

такой вариант адекватный?

Ещё раз: кастомное свойство shift указывается ОДИН раз и НЕ меняется.
Всё остальное вычисляется через него.
Можно указать 150 и делить либо 50 и умножать, как больше нравится. 50 - логичнее.

И замените трансформ на margin, хоть одинаковым будет для всех блоков, браузеру считать столько же, писать меньше.

Либо пишите свои 38, которые 37.5 на самом деле.

Как найти в DOM-элементе блоки (div), которые имеют ширину больше, чем их родительский элемент (td) средставми CSS?

Для расширения кругозора по теме сравнений в современном CSS можно начать отсюда https://vkvideo.ru/video-38306835_456239736

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

peppermint_patty, ну у вас проблема в том, что overflow для горизонтальной прокрутки обрезает вертикальные выпадашки, так? Вот и выводить их не вниз, а перемещать в пустой блок вне того overflow.

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

Вариант: показывать в специально заготовленном блоке, находящемся не внутри overflow.
Другой вариант: пойти к дизайнеру.

Как сделать “арочный” блок адаптивным?

frontAng, эммм.. Да что за ерунда?
Мало отличается от 38. Теперь опять нет связи со 150.

Как добиться полноценной работы SCSS модулей во Vue 3?

Return Me Void, знаете, когда код свой собственный и свежий, то и ладно.
Вот попал вам чужой проект, открыли вы его в браузере, нашли проблему в стилях.. Идёте искать в проекте...

Как сделать “арочный” блок адаптивным?

frontAng,
shift указывается один раз, самый большой. Ведь ширина элементов одинаковая.
Для остальных элементов можете тоже использовать shift для сдвига, вычисляя его через calc как треть и две трети.
И почитайте как работают и применяются кастомные свойства.

Задача перестала иметь отношение к вёрстке, это школьная математика средних классов.

Как сделать “арочный” блок адаптивным?

frontAng,

как сделать чтобы оно считало не "магичское" значение 38

Вы же его как-то вычислили?
Так и пишите, как вычисляли, используя кастомку.
Псевдокодом как-то так:

--shift: 150px

для сдвига
left: var(--shift)

для ширины
calc((100% + var(--shift))/4)

И про sibling-index() почитайте, может легче будет, если поддержка устраивает.

Как сделать “арочный” блок адаптивным?

frontAng,

но не растягиваются на допустимую ширину контейнера

Растягиваются. Но нужно взять в руки калькулятор и правильно посчитать проценты с учётом сдвигов. Если сдвиги по-прежнему нужны в px, то через calc. Если в %, то напрямую.

Как сделать “арочный” блок адаптивным?

frontAng, и что, блоки не уменьшаются при уменьшении окна?

Как сделать “арочный” блок адаптивным?

frontAng,

при уменьшении экрана итемы уменьшались также пропорционально

Единицы измерения зависящие от ширины вьюпорта это vw, от ширины контейнера cqw

В вашем случае, кажется, достаточно обычных %, сдвиг тоже в %. Можно отрицательным margin.
nth-child кроме цвета ни за чем не нужен.

Как реализовать подобный слайдер?

Это из какого года ответ прилетел?
Вы чего? Добавлять swiper с помощью jQuery?
Сайт с этими десктопными приложениями свёрстан ещё на таблицах.

Как реализовать подобный слайдер?

Взять swiper, повернуть слайд или картинку внутри слайда. Аналогично с размером.

Как добиться полноценной работы SCSS модулей во Vue 3?

Return Me Void, прям из браузера? Оч удобно ))
А, нет? Надо сначала найти класс в разметке, а потом Шторм поймет куда перейти?

Как подключить github репозиторий к хостингу?

Как вариант:
Нужно открыть хелп хостинга и прочитать, что нужно сделать с его стороны, например, настроить веб хуки.
Со стороны гитхаба настроить Github Action, который будет разворачивать проект в нужные ветки.

У меня сделано именно так.

Как сделать резкое переключение слайдов?

Как сделать резкое переключение слайдов?

Отключить transition

Чтобы карусель не следовала плавно вслед за движением мыши

При сдвиге мыши, будет с той скоростью с которой двигают мышью.
Если это поведение не нравится, то читайте документацию, включайте/отключайте нужные параметры.

Как добиться полноценной работы SCSS модулей во Vue 3?

Ещё добавлю, что конкатенация классов элементов очень часто оказывается неудобной - чтобы найти, требуется две итерации поиска.
А обычный нестинг есть в нативном CSS.

Как сделать чтоб условия не перезаписывались?

но я хочу сделать по красивее

Чтобы покрасивее:
0. сделать песочницу с кодом и видимой проблемой на codepen.io или аналогах
1. Подробно описать задачу (только конкретно, что не получается)
2. Возможно, вам поможет IntersectionObserver MDN
3. Возможно, будет удобнее манипулировать классами или кастомными свойствами в CSS, чем инлайнить стили. Мне так больше нравится.

Как сделать чтоб условия не перезаписывались?

Полностью задача не описана. Там что, два фона должны применится одновременно?
Так они пишутся через запятую. Тык
Опять таки, удобнее классами/кастомками.