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;
}

Как я понимаю, сделать вебкомпонент в котором будет и текст статьи и ссылка на стиль не вариант?
Тогда я бы загружал внешний стиль жаваскриптом, и после получения кода стиля заворачивал бы его в какой нибудь препроцесор (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;

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