Overlay issues when the image is changed or resized - html

Question

I'm trying to add UI elements over the top of an image by using pure HTML and CSS only. Here's the expected result
My code is working as expected but there are two issues. Here are the issues:
When I changed the image into a Adobe Illustrator one the UI elements are disappeared
SOLVED At certain point the background image will not responsive while the UI elements keep changing it size when the window is upsized
Any idea where did I go wrong? This is my attempt
.plane-container {
position: relative;
max-width:100%;
max-height:100%;
}
.deck {
display: flex;
}
.arrow {
display: flex;
align-items: center;
justify-content: center;
}
.plane-container .overlay .main-deck {
width: 67%;
height: 23%;
margin-top: 19.3%;
margin-left: 16.5%;
position: absolute;
}
.plane-container .overlay .lover-deck {
width: 20.3%;
height: 10%;
margin-top: 27.2%;
margin-left: 16.5%;
position: absolute;
}
.plane-container .overlay .aft-deck {
width: 16.7%;
height: 10%;
margin-top: 27.2%;
margin-left: 55%;
position: absolute;
}
.plane-container div img {
position: relative;
max-width:100%;
max-height:100%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="plane-container">
<div class="overlay">
<div class="main-deck deck">
<div class="arrow" style="width: 5%;">
<i class="fa fa-angle-left"></i>
</div>
<div style="background:blue; width: 90%; height: 100%;">
</div>
<div class="arrow" style="width: 5%;">
<i class="fa fa-angle-right"></i>
</div>
</div>
<div class="lover-deck deck">
<div class="arrow" style="width: 10%;">
<i class="fa fa-angle-left"></i>
</div>
<div style="background:red; width: 80%; height: 100%;">
</div>
<div class="arrow" style="width: 10%;">
<i class="fa fa-angle-right"></i>
</div>
</div>
<div class="aft-deck deck">
<div class="arrow" style="width: 10%;">
<i class="fa fa-angle-left"></i>
</div>
<div style="background:purple; width: 80%; height: 100%;">
</div>
<div class="arrow" style="width: 10%;">
<i class="fa fa-angle-right"></i>
</div>
</div>
</div>
<div>
<!-- Image from Adobe Illustrator -->
<!-- <img src="https://i.postimg.cc/j5ggYMjt/from-ai.png" /> -->
<!-- Original Image -->
<img src="https://i.postimg.cc/V6ypHG5T/red.png"/>
</div>
</div>
And here's the JSFiddle link
EDIT 1
Problem 2 is solved by Terek Janczik

Answer 1

Add this line to your code to fix the boxes not sitting in the correct location when the screen is resized beyond a certain width:
.plane-container div img{
width:100%;
}