Layout Chaining

<header class="site-header position-relative" style="width: 100vw; min-height: ;">
<section class="layout-hero position-absolute d-flex align-items-center" style="background-image: linear-gradient(rgba(0, 0, 0, .7) 50px, transparent), url(); height: 100%; width: 100%;"></section>
<div class="layout-hero-content position-absolute d-flex align-items-center w-100 h-100">
  <div class="container">
    <div class="row justify-content-center text-center">
      <div class="header-content col-11 col-sm-10 col-md-9 animated fadeInUp">
        <h2 class="page-section-title text-light"></h2>
        <p class="page-section-text text-light d-none d-md-block">
          
        </p>
      </div>
    </div>
  </div>
</div>
</header>
<main class="container mt-4">

</main>