Александр Васильев

Если вот прямо "поиграть цветами" хочется, то есть отличный, но затратный вариант.

Нанимаете разработчика, он шерстит ваш лендос, находит все цветовые параметры, объединяет их в css-переменные. Далее эти переменные в одном месте можно редактировать через средства разработчика. Результат видно "на лету".
Но так как инструменты разработчика по какой-то причине табу, то напрягаем этого же разработчика еще больше, и он пилит красивую панельку с ползунками или иными средствами визуального редактирования и клиент радостно "играет с цветами" в этой панельке.

Однако встаёт вопрос экономической целесообразности такого подхода.

Ну флексбоксы и гриды вам и без меня посоветуют. Я лишь отмечу - приучайтесь читать код, а не бездумно копипастить его. У вас, в таком коротком коде, у селектора .content почему-то дублируются правила. Не говоря уже о дублировании правил и свойств в блоке медиазапросов. Пользуйтесь одним из фундаментов CSS - каскадом. Если вы прописали свойства какому-то селектору, а потом в блоке медиазапросов что-то дописали или изменили , то все описанные ранее свойства для этого селектора так же будут применены (если они не переопределены с большей специфичностью - определение блока медиазапросов по дефолту повышает специфичность всех вложенных селекторов).

Конкретно на ваш вопрос, ответ:

media only screen and (max-width: 1216px) {

.content{
text-align: center;

position: relative;
margin: 0 auto;
}

.content_block {
text-align: left;

position: relative;
max-width: 1200px;
width: 295px;
height: 200px;
border: solid 1px;
display: inline-block;
padding-bottom: 50px;
margin: 0 auto;
margin-top: 40px;

background-color: #FFE475;
}
//...

svg элемент с дугой белого цвета и тенью.

Надо сначала JS подключить

Ссылка на пример
При уменьшении ширины окна, появляется бургер

Это такой простой способ.

Способ нормальный, просто к искусственному интелекту это относится так же как табличка экселя с 2 формулами - то есть никак. Тупо статистика в самом примитивном виде.

Мне просто интересно, а можно сделать это как то лучше?

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

Если мы каждую секунду будем закидывать в бд какие то данные, а если пользователей будет много, допустим 1000 и более, не скажется ли это на производительности и как лучше в таком случае вообще собирать такие данные?

Нет, если пользователей будет 1000, а кино в среднем около часа, то активность в плане записи в бд будет околонулевая, за 60 минут ~1000 действий, что примерно равно 1 действие в 3 секунды. Даже если активность будет в 10 раз больше, а пользователей тоже в 10 раз больше - активность в итоге будет около 100 действий за 3 секунды, или 30-40 действий в секунду, для нормальной структуры бд это вообще не нагрузка.

Слишком сложно. Не легче ли просто проверить на id и исходя из этого выводить нужный контент, ведь у каждой страницы уникальный идентификатор.
Если у вас включен fenom, что я вам советую, то код будет выглядеть так (вместо 15 поставьте id вашей страницы ):

{if $_modx->resource.id == 15}
<section class="section">
          <div class="container-fluid">
              BEAUTY Блок 
          </div>
</section>
{/if}

Если же fenom не включен и вы по каким-то причинам не хотите его включать, то можно написать условие так:

[[*id:is=`15`:then=`
<section class="section">
          <div class="container-fluid">
              BEAUTY Блок 
          </div>
</section>
`]]

нашел почему не работало не указал ТВ в &includeTVs спасибо