Problem trying to position: fixed on a grid row - php

Question

Im trying to do that: get 3 consecutives rows of a grid being "fixed;" but Im having problems that idk. Heres my code:
.main-container {
display:grid;
background-color:#e0e0e0;
grid-template-columns: 50% 50%;
box-sizing:border-box;
z-index:-1;
}
.main-container > * {
text-align:center;
display:flex;
justify-content:center;
align-items:center;
}
.main-container div {
color:black;
border: px solid black;
}
.main-container video {
display:block;
width:100%;
height:100%;
/* Scale video to container size */
object-fit: cover;
object-position: center;
z-index:10000;
}
.main-container h4 {
color:#edbd87;
}
.item1{
grid-column: 1 / 3;
background-color: green;
height:1080px;
}
.item2{
right:0;
left:0;
top:300px;
bottom:0;
position:absolute;
grid-column: 1 / 3;
display:inline-block;
z-index:1000000;
}
.item3{
background:#e0e0e0;
grid-column: 1 / 3;
height:40vh;
border-bottom:1px solid black;
}
.item4 {
padding:30px;
z-index:10;
width:100%;
height:800px;
}
.item4 img{
padding:15px;
justify-self:center;
display:block;
width:90%;
height:80%;
/* Scale video to container size */
object-fit: cover;
object-position: center;
border-radius: 80px 20px;
z-index:10;
}
.item5{
padding:40px;
width:100%;
display: inline;
z-index:9;
}
.item5 *{
padding:20px;
font-weight:bold;
font-size: 300%;
}
.item5 p{
margin-top:30px;
padding:40px;
font-weight:bold;
font-size: 180%;
}
.item5 h4{
margin-top:40px;
font-weight:bold;
font-size: 640%;
}
<?php get_header(); ?>
<div class="main-container">
<div class="item1">
<video id="vid" src="http://localhost/wordpress/wp-content/themes/twentytwentyone-child/img/coffee1.mp4" width="1920" height="1080" autoplay loop muted type="video/mp4"> </video>
</div>
<div class="item2">
<p style="font-size:50px; color:white;"> Join Us! </P>
<button type="button" class="btn btn-outline-warning" style="font-family:forum; font-weight:bold; background-color:transparent; border-radius: 3px; color:yellow; font-size:50px; border: 2px solid yellow;">Warning</button>
</div>
<div class="item3">
<img src="http://localhost/wordpress/wp-content/themes/twentytwentyone-child/img/logo.png" />
</div>
<div class="item4">
<img src="http://localhost/wordpress/wp-content/themes/twentytwentyone-child/img/arvan2.jpg" />
</div>
<div class="item5">
<h4>WHO WE ARE?</h4>
<p>
ArvanJobs is above all peace of mind. It is a new way
of working, of traveling, of training, of advancing in
your career. Whether you are a company looking for
workers or you are looking for a new job
opportunity, ArvanJobs will always be by your side,
selecting the best workers and the best companies
that will boost your career.
</p>
</div>
<div class="item6">
<h4>WHY WORK WITH US?</h4>
<p>
For our personal treatment, our advice, and above
all for our experience working in hotels in
numerous countries.
Because we know how difficult it is to take that step
of daring to work in a foreign country. Because we
know how hard it is to find the right staff.
</p>
</div>
<div class="item7">
<img src="http://localhost/wordpress/wp-content/themes/twentytwentyone-child/img/arvan4.jpg">
</div>
<div class="item8">
<h4>HOW WE WORK?</h4>
<p>
All candidates are interviewed by staff who have
worked in hotels, not offices
The same happens with our clients who have to
satisfy a series of criteria and guarantees for the
worker to work with us.</p>
</div>
<div class="item9">9</div>
<div class="item10">10</div>
</div>
<?php get_footer(); ?>
I want to fix .item4 and .item5 (they are in a row with 2 columns) and triplicate the row to be the same (with diff content) 3 times. And I want all of the 3 rows being fix.
The problem is when i put the position fixed in any of the .items the thing goes crazy.
I upload a image to clarify myself, sry about:
There u can see the 3 rows, I want the 3 rows being fixed, or at least the images being fixed for when I scroll down, the 2nd row will cover the 1st, and then the 3rd will cover the 2nd. I like this "diapositive" effect.

Answer 1

I tried some solutions, you can use this one:
when I position the element in the grid to fix, I make a new empty element with the same width and height, and the problem is solved.