After finalizing my header design, I encountered an issue with the mobile version of the website. The images in the header are not responsive and do not adapt well to different screen sizes. I need assistance converting the header design into functional code that is responsive on all devices. Can someone please help?
Code
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
padding:0;
margin:0;
width: 100%;
height: 100%;
}
#img{
position: absolute;
right: 100;
top: 35px;
z-index: -1;
width: 30%;
}
#img2{
position: absolute;
right: 0;
left: 100;
margin-top: 30px;
margin-left: 10em;
top: 50px;
z-index: -1;
width: 30%;
}<header>
<div class="col-lg-12" style="margin-bottom: 10em;">
<div class="row">
<div class="col-lg-8 my-auto mt-3 mb-5">
<h2 style="font-weight: bolder;margin-top: 2em;margin-left:1em;font-size: 7vw;font-family: 'Poppins', sans-serif;" data-sal="slide-up" style="margin-left: 1.5em;" data-sal-delay="1500" data-sal-easing="ease-out-bouce" data-sal-duration="1200"><span class="mb-5">Capture your</span><br><span>priceless</span><br><span>moments</span><br><span>with aw zone</span></h2>
</div>
<div id="img">
<img src="https://images.pexels.com/photos/1024613/pexels-photo-1024613.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="" width="300" class="thumbnail">
</div>
<div id="img2">
<img src="https://images.pexels.com/photos/1024613/pexels-photo-1024613.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="" width="300">
</div>
</div>
</div>
</header>