HTML/CSS slider not displaying correctly on mobile - html

Question

I have a slider in the form of a figure that takes 200% width of the body, inside this figure I have set up 2 images slider one next to another with flexbox each taking 100% width of the body I have set the body to be on overflow-x: hidden; so that only 1 of the 2 images would show at a time. The slider is activated through radio links and a simple transform: translate(-50%);
This works perfectly on PC browsers but unfortunately not on mobile:
as shown in this screenshot here
here's the link to the site containing he slider:
https://jzsgpbizbig5vvch0nnmdg-on.drv.tw/Openclassroom/webagency/Webagency.html
here's the html part of the slider
<!--Slider starts here-->
<section>
<input type="radio" id="i2" name="images" />
<input type="radio" id="i1" name="images" />
<figure id="slider">
<div class="controls">
<div class="left-control">
<label class="prev" for="i2">
<i class="fas fa-angle-left"></i>
</label>
</div><!--left control-->
<div class="right-control">
<label class="next" for="i1">
<i class="fas fa-angle-right"></i>
</label>
</div><!--right control-->
</div><!--controls-->
<div id="slide1">
<img src="images/slider/bg1.jpg">
<div class="text">
<h1><span>WEBAGENCY</span>: L'AGENCE DE TOUS<br>VOS PROJECTS!</h1>
<h3>Vous avez un projet web? La WebAgency vous aide à le réaliser!</h3>
<h5>Plus d'infos</h5>
</div><!--text-->
</div><!--slider-->
<div id="slide2">
<img src="images/slider/bg2.jpg">
<div class="text2">
<h1><span>WEBAGENCY</span>: L'AGENCE DE TOUS<br>VOS PROJECTS!</h1>
<h3>Vous avez un projet web? La WebAgency vous aide à le réaliser!</h3>
<h5>Plus d'infos</h5>
</div><!--text-->
</div><!--slider2-->
</figure>
</section>
<!--End of slider section-->
And here's the CSS
body
{
font-family: 'Roboto', Arial, sans-serif;
display: flex;
flex-direction: column;
font-size: 100%;
width: 100%;
overflow-x: hidden;
/* Slider */
figure
{
display: flex;
position: sticky;
top: 90px;
left: 0px;
width: 200%;
transition-duration: 1s;
}
#slide1 , #slide2
{
width: 100%;
height: 100%;
}
#slide1 img , #slide2 img
{
width: 100%;
}
.text
{
position: absolute;
height: 40%;
width: 40%;
left: 5%;
top: 20%;
}
.text2
{
position: absolute;
height: 40%;
width: 40%;
left: 55%;
top: 20%;
}
#slide1 h1 , #slide2 h1
{
left: 150px;
top: 150px;
color: white;
font-size: 2.4vw;
}
#slide1 h1 span , #slide2 h1 span
{
color: #30ABB1;
}
#slide1 h3 , #slide2 h3
{
padding-top: 5px;
font-family: arial;
color: white;
font-size: 1vw;
}
#slide1 h5 , #slide2 h5
{
display: inline-block;
color: white;
background-color: #30ABB1;
padding: 10px;
margin-top: 10px;
border-radius: 3px;
font-size: 1.5vw;
cursor: pointer;
}
#i1 , #i2
{
display: none;
}
#i1:checked ~ figure
{
transform: translate(-50%);
}
#i2:checked ~ figure
{
transform: none;
}
.left-control
{
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
height: 60px;
width: 30px;
border-radius: 0 60px 60px 0;
background-color: rgba(45 ,45 ,45 , 0.7);
z-index: 90;
}
.left-control i
{
position: absolute;
color: white;
font-size: 1.3em;
font-weight: bold;
top: 30%;
margin-left: 5px;
cursor: pointer;
}
.left-control:hover
{
height: 60px;
width: 40px;
transition-duration: 250ms;
overflow: hidden;
padding-left: 10px;
}
.right-control
{
position: absolute;
right: 50%;
top: 50%;
height: 60px;
width: 35px;
border-radius: 60px 0 0 60px;
background-color: rgba(45 ,45 ,45 , 0.7);
z-index: 80;
}
.right-control i
{
position: absolute;
color: white;
font-size: 1.3em;
font-weight: bold;
top: 30%;
margin-left: 15px;
cursor: pointer;
}
.right-control:hover
{
height: 60px;
width: 40px;
transition-duration: 250ms;
overflow: hidden;
padding-right: 10px;
}
/* Slider ends here */
So my question is: How can I make this design work the same on mobile?
Thanks in advance for your time and sorry for the long post. XD

Answer 1

Only Change
.figure{ position: absolute;}
To
.figure{ position: sticky; }
And
#services{ margin-top: 500px; }
To
#services{ margin-top: 0px; }
also remove this
.section { overflow-y: hidden;}