copyhold

Получается заголовки должны быть одной высоты, чтобы текст всегда был на одном уровне

да, задайте высоту заголовку - 3lh. текст не надо центровать

можно еще попробовать сабгрид,

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

вам поможет свойство
shape-outside

можно попробовать сделать 2 фоновых градиента

.bg {
  background: 
radial-gradient(closest-corner at 75% 50%, rgba(169,54,77,1) 0%, rgba(142,51,69,0) 100%),
    radial-gradient(circle at 20% 20%, rgba(169,54,77,1) 0%, rgba(142,51,69,0) 100%)

#000;
}

`items_9ujCP` выглядит как селектор сгенерирванный на этапе билда.
так что возможно что он меняется от билда к билду

можно попробовать использовать view-transition api

не вешайте обновления ДОМ на ресайз - всегда будут гличи.
просто создайте весь дом один раз по загрузке документа и рулите Css-ом

...
if (matches) {
const updatedString = originalString.split(lastTime).toSpliced(-1,0,appendText).join(lastTime);
...

во первых выдели useEffect в хук
const books: BookInformation[] = useBooks();
внутри хука , после того как всё загружено сформируй массив BookInformation - ОДИН РАЗ!
при этом проверяй на undefined,
во вторых загружай авторов , книги. и отдывы параллельно. (Promise.all)

Возможно вам поможет https://developer.mozilla.org/en-US/docs/Web/API/F...
Фича экспериментальная и не работает в ФФ, но все ж...

Как я понимаю, сделать вебкомпонент в котором будет и текст статьи и ссылка на стиль не вариант?
Тогда я бы загружал внешний стиль жаваскриптом, и после получения кода стиля заворачивал бы его в какой нибудь препроцесор (LESS) добавив предварительно дополнительный класс . Ну и можно вставлять в страницу.

сгуглено отсюда

.box {
width: 313px;
}
.box::after {
display: block;
content: '';
padding-bottom: 100%;
}
.box__child {
position: absolute;
with: 100%;
height: 100%;
}

как вы видите решение довольно старое, но всё еще работает.
можно обойтись и без псевдо элементов

Решение с псевдоэлементом.

На мобильных наиболее правильно использовать нативные элементы а не селекты. Благо поддерживаются хорошо.
А для десктопов можно сделать фолбэк на селектах.

Без жаваскрипта здесь не обойтись, но ничего сложного.

для контейнера
flex-flow: column wrap; height: 100vh;

но поимей ввиду, ширина контейнера автоматически не увеличивается ибо есть такой баг (хоть и не во всех браузерах)

6 можно забыть.
Разработка под 7 и 8 должны различаться радикально.
Я бы выбрал 7 ибо мейнстрим.
Если для одного клиента, то до 8 есть еще время.

form.querySelectorAll('input[type=mail]')
form.querySelectorAll('input[type=tel]')
form.querySelectorAll('input[type=checkbox]') // тут придется пробегать по всем возможным именам полей типа чекбокс и выбирать :checked

в общем не многовато ли проблем? Может просто послать ее в IFRAME?

А CSS?

.price-unknown ~ .block_payment_custom { display: none; }

конечно если они сиблинги.