andand44

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

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

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

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

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

Через 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;
}