html css layout horizontal-scrolling overlapping

How can I implement an overlapping and scrolling effect like on this site?

[https://www.pravilamag.ru/hero/289163-kseniya-chilingarova-ya-byla-by-vetrom-sirokko-teplym-no-kovarnym/](link to the site in question)

Only the first section (the video and the block covering it) is of interest.

Thank you in advance for your help.

I have tried this code, but without success.

<body>

    <div class="body-top">
        <div class="box-overlap">
            <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto beatae excepturi expedita illum labore magni maiores obcaecati quaerat sunt ut. Asperiores, dolorum in natus neque non quaerat tenetur vero voluptatum?</div>
            <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dicta facere molestiae placeat possimus quaerat similique, tempore tenetur voluptate. Aliquid amet consequatur doloremque hic itaque labore nemo quod sapiente voluptatibus?</div>
        </div>
        <div class="box-1">
            <div class="box-inner">

            </div>
        </div>
    </div>
    <div class="box-2">

    </div>

    <script src="index.js"></script>
</body>


.body-top {
    background: black;
}

.box-overlap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: -50vh auto 0;
    background: rgba(0, 0, 0, 0.5);
    position: relative;
    min-height: 100vh;
    width: 100%;
}

.box-overlap .text {
    font-size: 30px;
    padding: 20px 500px;
}

.box-1 {
    display: flex;
    align-items: center;
    top: 0;
    margin: 0 auto;
    background: #66ffd1;
    max-width: 1920px;
    min-height: 100vh;
}

.box-2 {
    height: 100vh;
    width: 100vw;
    background: #f5d1ff;
}

.box-inner {
    display: flex;
    margin: 0 auto;
    background: #FF0000;
    max-width: 1700px;
    min-height: 700px;
    width: 100%;
}

Solution

I hope this helps:

* {
    margin: 0;
    padding: 0;
}

.content {
  padding: 0 1rem;
  margin: 0 auto;
  max-width: 40rem;
}
.content p {
  min-height: 100vh; 
}

.bg {
  height: 100vh;
  margin: 0;
  width: 100%;
  top: 0;
  z-index: -1;
  position: sticky;
  background: url(https://images.unsplash.com/photo-1481349518771-20055b2a7b24?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cmFuZG9tfGVufDB8fDB8fA%3D%3D&w=1000&q=80);
  background-position: center;
  background-size: contain;
}

<h1>title</h1>

  <section>
  
    <figure class="bg"></figure>
  
    <article class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum tellus felis, at lobortis orci sollicitudin ac. Donec lobortis sapien ac posuere faucibus. Mauris lectus neque, pretium non volutpat eget, vestibulum at magna. In sollicitudin augue nunc, non bibendum augue ornare quis.</p>
    </article>
  
  </section>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at finibus elit, in venenatis lacus. Vivamus et magna mattis, aliquet lectus non, imperdiet enim. Proin nec sollicitudin ex, sit amet maximus nisi. Integer tempus hendrerit nisl, in pulvinar felis mollis nec. Vestibulum placerat, ipsum ut luctus auctor, ante velit consequat mi, at pellentesque mauris nisl ac purus. Pellentesque eleifend massa eu urna porta congue. Vivamus a nisl eu erat mattis blandit. Quisque nunc dui, congue ultrices metus ut, cursus tristique dui. Pellentesque rhoncus justo non nisi pulvinar, ut blandit dolor hendrerit. Donec tristique nibh nec velit mattis volutpat. Sed dictum ut lorem sed interdum. Vivamus ac erat sodales, commodo diam ut, mattis nulla.</p>