houd1ini

Как по мне, лучшим решением будет:

h2 {
  display: inline-block;
  min-width: 200px;
}

h2:after, h2:before {
  left: 0;
  right: 0;
  width: auto;
}

И дать родителю (в вашем случае body), выравнивание по центру:

body {
  text-alight: center;
}

Лучший вариант - сделать или скопировать как svg, и дать как бэкграунд на псевдоэлементы ::after и ::before

Советую вам комбинировать свойство min-height, и при этом давать минимальные паддинги. Если захотите добавить еще контента, то при min-height: 100vh и большом количестве текста, контент прилипнет.

https://livedemo00.template-help.com/wt_prod-3852/... - можете посмотреть здесь на второй секции, псевдоэлемент с градиентным бэкграундом

https://www.fontsquirrel.com/matcherator - подберет максимально похожий шрифт

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

.content {
  position: relative;
  padding-right: 400px; //отступ справа на ширину контента, так как при абсолютном позиционировании элемент выпадает с потока
}

.content img {
  position: absolute;
  right: 0;
  display: block;
  transition: transform 0.33s linear;
}

.content img:hover {
  transform: scale(1.1); //увеличивает размер изображения в 1.1 раза
}