Problem with the sticky element of locmotive scroll - html

Question

I'm coming to you for help because I have a problem with locomotive scroll and its sticky element.
Context: I have created a container with two elements in it
A parent containing three images, each image is in absolute position so that it can be overlaid.
A parent containing three texts
I want the element containing the three images to be sticky to its parent.
Problem: I have the desired result, only my sticky element sticks out of its parent. When I remove the absolute position of the images all work correctly.
Question: How do I keep my absolute position for the overlay of the images and make the sticky element not stick out of its parent?
HTML
<section id="secteur">
<div class="container" id="fixed">
<div class="assets col-6#sm">
<div data-scroll data-scroll-sticky data-scroll-target="#fixed">
<div class="imgone">
<img src="
https://cdn.sanity.io/images/s02i1y2u/staging/ec87773a743f14c42fafb5ed1a6afedf4026eec1-1920x1466.png" />
</div>
<div class="imgtwo">
<img class="imgtwo" src=" https://cdn.sanity.io/images/s02i1y2u/staging/d3d9331a320133031754f779ff68a429f71084db-1920x1466.png" />
</div>
<div class="imgthree">
<img class="imgthree" src="https://cdn.sanity.io/images/s02i1y2u/staging/f77e88e29ab27c21a7edee537d2a67ac592bc268-1920x1466.png" />
</div>
</div>
</div>
<div class="metiers col-6#sm">
<div class="metier one">
<h3>Metallerie</h3>
<p>Donec at lorem leo. Praesent suscipit nunc vel sapien gravida tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Maecenas massa lorem, convallis sed nulla fermentum, condimentum molestie sapien. Ut vitae vestibulum sapien. Donec congue nibh eu nisl imperdiet, sit amet mattis lectus malesuada. Curabitur non porta ligula. Sed consequat sagittis lobortis. Cras id ligula ut turpis luctus iaculis. Etiam rhoncus, ex a imperdiet finibus, nisi ipsum eleifend ex, at convallis est mauris non orci. Phasellus aliquet orci sapien, eu condimentum quam blandit ut. Sed suscipit sit amet diam eu sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aenean ultricies diam sem, ac gravida ex aliquet ac. Suspendisse ornare blandit enim in tempus. Phasellus orci risus, lacinia eget ultrices at, molestie eu turpis.</p>
</div>
<div class="metier two">
<h3>Chaudronnerie</h3>
<p>Donec at lorem leo. Praesent suscipit nunc vel sapien gravida tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Maecenas massa lorem, convallis sed nulla fermentum, condimentum molestie sapien. Ut vitae vestibulum sapien. Donec congue nibh eu nisl imperdiet, sit amet mattis lectus malesuada. Curabitur non porta ligula. Sed consequat sagittis lobortis. Cras id ligula ut turpis luctus iaculis. Etiam rhoncus, ex a imperdiet finibus, nisi ipsum eleifend ex, at convallis est mauris non orci. Phasellus aliquet orci sapien, eu condimentum quam blandit ut. Sed suscipit sit amet diam eu sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aenean ultricies diam sem, ac gravida ex aliquet ac. Suspendisse ornare blandit enim in tempus. Phasellus orci risus, lacinia eget ultrices at, molestie eu turpis.</p>
</div>
<div class="metier three">
<h3>Serrurerie</h3>
<p>Donec at lorem leo. Praesent suscipit nunc vel sapien gravida tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Maecenas massa lorem, convallis sed nulla fermentum, condimentum molestie sapien. Ut vitae vestibulum sapien. Donec congue nibh eu nisl imperdiet, sit amet mattis lectus malesuada. Curabitur non porta ligula. Sed consequat sagittis lobortis. Cras id ligula ut turpis luctus iaculis. Etiam rhoncus, ex a imperdiet finibus, nisi ipsum eleifend ex, at convallis est mauris non orci. Phasellus aliquet orci sapien, eu condimentum quam blandit ut. Sed suscipit sit amet diam eu sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aenean ultricies diam sem, ac gravida ex aliquet ac. Suspendisse ornare blandit enim in tempus. Phasellus orci risus, lacinia eget ultrices at, molestie eu turpis.</p>
</div>
</div>
</div>
</section>
<section id="next">
<div class="container">
<p>Page suivante</p>
Realisations
</div>
</section>
SCSS
#secteur {
.container {
display: flex;
justify-content: space-between;
.assets {
width: 100%;
padding-top: calc(var(--space-xxxl) + 0.75em);
position: relative;
.imgone {
grid-column: 1;
grid-row: 1;
transition: opacity .5s ease;
}
.imgtwo,
.imgthree {
grid-column: 1;
grid-row: 1;
transition: opacity .5s ease;
opacity: 0;
&.visible {
opacity: 1;
}
}
img {
width: 90%;
position: absolute;
}
}
.metiers {
cursor: pointer;
display: flex;
align-items: flex-start;
padding-top: var(--space-xxxl);
flex-direction: column;
justify-content: flex-start;
h3 {
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid black;
}
.metier {
margin-bottom: var(--space-xl);
}
}
}
.invisible {
opacity: 0;
}
.one,
.two,
.three {
transition: opacity .5s ease;
}
.opacity {
opacity: 0.3;
}
}
#vide {
height: 200vh;
}
I created a codepen to simulate the problem encountered
https://codepen.io/christophedelamare/pen/YzYBBdw