Отзывчивая обработка героя с верхними и нижними границами, которые простираются на левой стороне

Question

Я пытаюсь закодировать эту обработку героя.

Текст заголовка и абзаца содержится в сетке с максимальной шириной 1200px и авто слева и справа.

Верхняя и нижняя границы должны исходить от левого края, но останавливаться в конце центрированного текстового поля 1200px.

Я кодировал их как HR-менеджеров, которые могут быть более полезны для стиля.

<div class="hero">
    <img src="https://via.placeholder.com/1600x800" alt="">
    <div class="hero-text">
        <hr>
        <div class="contain-to-grid">
            <h1>Title</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget laoreet dolor. Etiam quis leo venenatis, suscipit nisi id, luctus urna. Aenean iaculis justo vel consectetur mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget laoreet dolor. Etiam quis leo venenatis, suscipit nisi id, luctus urna. Aenean iaculis justo vel consectetur mollis.</p>
        </div>
        <hr>
    </div>
</div>

и вот мой CSS (это в настоящее время просто делает HR go во всю ширину)

    .hero {position: relative;}
    .hero img {width: 100%; height: auto;}
    .hero-text {position: absolute; bottom: 30px; width: 100%;}
    .hero-text hr {border-color: #000; margin: 30px 0;}
    .contain-to-grid {width: 100%; max-width: 1200px; margin: 0 auto;}

Я в тупике. Любые идеи о том, как закодировать это? Это должно быть отзывчивым.

Answer 1

Только что добавил div .inner и добавил css. Надеюсь, это поможет вам.

.hero {
  position: relative;
}

.hero img {
  width: 100%;
  height: auto;
}

.hero-text {
  position: absolute;
  bottom: 30px;
  width: 100%;
}

.hero-text hr {
  border-color: #000;
  margin: 30px 0;
}

.contain-to-grid {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.inner {
  float: left;
  width: 100%;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
}

<div class="hero">
  <img src="https://via.placeholder.com/1600x800" alt="">
  <div class="hero-text">
    <div class="contain-to-grid">
      <div class="inner">
        <h1>Title</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget laoreet dolor. Etiam quis leo venenatis, suscipit nisi id, luctus urna. Aenean iaculis justo vel consectetur mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget
          laoreet dolor. Etiam quis leo venenatis, suscipit nisi id, luctus urna. Aenean iaculis justo vel consectetur mollis.</p>
      </div>
    </div>
  </div>
</div>