Centered header on top of a horizontal line - how to make it responsive?

Question

css

Good day!
There is a problem over which I am scratching my head. We need to make the centered header on top of the horizontal line responsive. Here is my code - codepen.io/owlblinked/pen/yYPKBd The catch is that as the screen size decreases, the lines get smaller and the entire square block visually falls apart. It is necessary that the lines keep visually square and, accordingly, decrease as much as necessary to fit completely in the block at all times. Thanks for your help, you help me a lot.

Answer 1

It is not clear why you are so rewarded. Make it easier. Use a border and there will be no problems. Here is an example - codepen.io/GoooodBoy/pen/zvPyJL

Answer 2

As an option to do this
codepen.io/Allardcool/pen/OyOrEM
I didn’t add it yet, you need to see when you reach what width you will need to reduce the indents of h1.about-us__title paddings in the media

@media ширина{
.about-us__title{
padding-left:
padding-right:
}
}