alexalexes

input[type=range]::-webkit-slider-thumb::before,  /* для остальных браузеров */
input[type=range]::-moz-range-progress /* для Firefox */
{
 /**/
}

Такое же внимание уделите псевдоэлементам -webkit-slider-runnable-track и -webkit-slider-thumb, потому что FF тут умудрился выбиться из толпы.

Чтобы сохранить пропорции при отображении в любом браузере, нужно сделать контейнер под видео с относительным позиционированием:

.video__container
{
  position: relative;
}

И в него положить img от png файла с однотонным заполнением с нужным соотношением сторон (можно в виде встроенного бинарника сформировать ресурс, такой файл в эквиваленте png весит пару сотен байт).
Для iframe сделать абсолютное позиционирование, чтобы можно было его приподнять над img блоком, с помощью z-index, и задать 100% ширину и высоту, чтобы его размер зависел от контейнера, а размер (точнее, пропорции) контейнера будет зависеть от размера img.

iframe.video__iframe
{
  position: absolute;
  z-index: 1;
  /* width и height устанавливаются в атрибутах iframe! */
}

В итоге получится такая конструкция:

<div class="video__container">
  <img src="video-iframe-background-1920x1080.png"/>
  <iframe class="video__iframe" src="" width="100%" height="100%"></iframe>
</div>

Такой подход позволяет гибко настраиваться размерам контейнеру .video__container, или фиксировать один из его размеров. При этом, iframe всегда будет держать пропорции того изображения, которое заложено в img. И это будет работать практически на любом браузере не первой свежести.

Анимация по ключевым кадрам.
animation: main-logo-texture 10s linear infinite;
Ключевые кадры:

@keyframes main-logo-texture {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(-99px)
    }
}

Можно указывать нужный элемент с помощью псевдоселекторов:

let life = lifesBlock.querySelector("span:first-child");

или

let life = lifesBlock.querySelector("span:last-child");

Изучайте, как верстать контейнеры с display: flex или display: grid.
Еще запишите пункт "CSS медиа запросы", чтобы отладить число колонок на разной ширине экрана.

Попробуйте шрифт из этого источника:
https://fonts-online.ru/fonts/montserrat
На пробной странице стили обводки текста от этого источника отрабатывают корректно.

В вашем примере используется карусель, у которой прописаны стартовое положение:

state = {
    carouselDeg: 17,
    itemDeg: -17,

carouselDeg - поворот элементов основной окружности в градусах. Опытным путем можно понять, что оно задается как:
(360 / кол-во элементов) / 2
Элементов у вас 10, значит, должно быть 18 градусов, а не 17 (можно заметить, что с 17 неровное начальное смещение).
itemDeg - вращение контента внутри одного элемента. Если хотите, чтобы контент всегда был обращен горизонтально, то берете ту же формулу со знаком минус.
Далее, есть такие методы:

next = () => {
    this.getIdItems(true);
    this.setState(state => ({
      carouselDeg: state.carouselDeg - 36,
      itemDeg: state.itemDeg + 36
    }));
  };

  prev = () => {
    this.getIdItems(false);
    this.setState(state => ({
      carouselDeg: state.carouselDeg + 36,
      itemDeg: state.itemDeg - 36
    }));
  };

Число 36 - это шаг вращения, он вычисляется как:
360 / кол-во элементов
В принципе все, что нужно знать для правильной ориентации карусели.
Прорисовкой элементов карусели занимается сама библиотека, позиции элементов на плоскости вам вычислять не нужно.

Чтобы применить свойство text-decoration на названии пункта меню, но не применять на псевдо элементе, нужно название обернуть в span:

<a href="#" class="menu__item menu__item--sport"><span>Зимний спорт</span></a>

Чтобы псевдо-элемент after был вплотную к названию, он, как вариант, должен быть строчным элементом. То есть, нужно отменить для него абсолютное позиционирование. Также, его нужно изобразить символом, а не геометрическим прямоугольником:

.menu__item
{
  text-decoration: none;
}
.menu__item > span
{
  text-decoration: underline;
}
.menu__item:after
{
  position: unset;
  content: '▪';
  margin-left: 5px;
}