andand44

C position: sticky; это можно и без js сделать

Наклон подбирать на глаз

background: repeating-linear-gradient(
    -45deg,
    rgb(109, 118, 232),
    rgb(109, 118, 232) 10px,
    rgb(73, 84, 226) 10px,
    rgb(73, 84, 226) 20px
  );

Можно с помощью символа юникода и псевдоэлементов сделать ➤
https://jsfiddle.net/5b240rLy/
Для третьей стрелки можно еще span добавить.

Как вариант сделать обертку для сайдбара с position: absolute и с помощью media запросов следить, чтобы это всё не заползало на container при маленьких разрешениях экрана
https://jsfiddle.net/nj4whv30/

https://jsfiddle.net/zcmtb37x/
Выводить последнюю звезду поверх текущих звезд и обрезать эту звезду на сколько нужно. С цифрами нужно еще поиграться. Сейчас все сделано на глаз.

Примерно так. Можно и градиент добавить.
https://jsfiddle.net/x4sf6en9/

object-fit и position: absolute должны помочь
https://jsfiddle.net/z5dneo16/

Вставлять в разметку не нужно. Нужно стилями менять цвет. Тогда можно и transition для плавности использовать. Если это иконка в svg или иконочный шрифт, само собой.

Нужно сделать два макета. Для авторизованного и неавторизованного. Добавление класса просто скроет некоторые блоки, которых совсем не должно быть в коде. Кнопка Войти для авторизованного пользователя, например.

Через css переменные можно.

<div class="item" style="--color:black;">
     <h1 class="subtitle">lorem 2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa aut a placeat, illum suscipit, consequatur officiis veritatis adipisci incidunt sapiente repellendus consequuntur. Enim architecto harum, doloribus illo veritatis omnis facilis.</p>
  </div>

https://jsfiddle.net/0tynwegm/

https://jsfiddle.net/7mzeycaq/

.product__subtitle {
  background-color: red;
  height: 100%;
}
.product__item {
  width: calc(100% / 3 - 28px);
  position: relative;
  margin: 0 14px;
  display: flex;
  flex-direction: column;
}

Есть несколько способов.
https://css-tricks.com/full-width-containers-limit...
Например такой

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

Через css переменные можно сделать

<div class="text-cards" style="--c:3">
  <div class="text-card">
    <div class="img"><img src="" alt=""></div>
    <h4>Полное отсутствие зубов</h4>
    <p>Lorem ipsum dolor sit amet </p>
  </div>
</div>

.text-cards {
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(var(--c), 1fr);
}

https://jsfiddle.net/q9t8eyLc/1/