Ankhena

Вставляйте через object, тогда стили сработают.

width: min-content; для basket__item или basket__inner.
Кстати, зачем им 2 обертки?

Потому что border картинкой не работает со скругленными уголками.

Во-первых, есть тег progress https://webref.ru/html/progress
Во-вторых, все это решается в один div, без вложенных спанов, дивов и прочего мусора
https://jsfiddle.net/enLoc9ga/

Где значение переменной устанавливается через js setProperty(если это меняющееся значение) (и тогда оно попадет в атрибут style, как в примере) либо через кастомное свойство в css, если это бутафория https://jsfiddle.net/enLoc9ga/1/

По запросам пользователей, вариант с выравниванием текста https://jsfiddle.net/enLoc9ga/2/

Вариантов не один:
1. Сразу SVG
2. Поворачиваете стрелку и рисуете множественный градиент
3. Трансформации и overflow. Например, так https://jsfiddle.net/novh5dz4/
Рамочку оставила для наглядности.

Так и задать https://jsfiddle.net/1ftc83yz/

Обычный псевдо с радиальным градиентом
https://jsfiddle.net/b6oqpr5L/

Альтернатива: border-radius и огромная тень

Для такой раскладки лучше всего подходят гриды https://jsfiddle.net/e780f9md/

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

P.S.

<meta http-equiv="Content-Type" content="text/html; charset="UTF-8">

Это устаревшая запись, сейчас используется короткая: <meta charset="UTF-8">

<style type="text/css"> - аналогично. Сейчас не нужно указание типа для тега style.

Если вы смотрели курсы, в которых показывали такой код, то они устарели по крайней мере лет на 5, а то и больше.

Множественные фоны задаются через запятую.
Самый первый - верхний, самый последний - нижний.
htmlbook.ru/blog/dva-fona-i-bolshe

@media (max-width: 768px) {
стили для вьюпортов меньше или равных 768px
}

И не забудьте

<meta name="viewport" content="width=device-width, initial-scale=1">

Вы transition написали для изменения свойств инпута.
А меняете свойства для placeholder'а

.signin__input {
    &::-webkit-input-placeholder  {
      transition: 2.3s ease 0s;
    }
    &:hover::-webkit-input-placeholder {
    color: #F4F4F4;
  }
}

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


Альтернативы:
SVG
filter drop-shadow
text-shadow для символа ▲
и еще что-нибудь, что я забыла

Почему бы не использовать для этого SVG?
https://jsfiddle.net/Ankhena/k62ntu5p/
Как сделать половину круга в css?

Либо conical-gradient, если устраивает поддержка https://caniuse.com/?search=conical-gradient

Псевдоэлемент и радиальный градиент
https://jsfiddle.net/vq8dy5Lz/

Альтернатива: SVG.

И Как сделать такой эффект скругления?

https://jsfiddle.net/21hvafnd/
Если нужно смещать предыдущие блоки, допишите это в js
Так со смещением https://jsfiddle.net/jzqahewd/

Фон и border-radius с одного угла.
Можно псевдо для желтого фона.

Можно просто сделать SVG на фоне между секциями. Не лучший вариант, если цвета могут меняться.

Можно радиальными градиентами.

Самый простой вариант https://jsfiddle.net/espm81a3/

И CSS, как сделать уголок?

white-space: pre-wrap;

tabs: '[data-features-tabs]',
а в разметке data-features-tab

Через nth-child https://jsfiddle.net/ayvewhkg/