Overlap image with another image - html

Question

First image is going as a background with its multiply blend mode and its color (100% x 1172px).
At the very bottom of this container is a block (50% x 520px) with same background, but without blending mode.
What exactly I'm trying to reach.
-- The idea is to keep these two image as a single one at least to >= 920px width of breakpoint.
HTML&CSS markup
.main-container {
display: flex;
height: 1172px;
width: 100%;
position: relative;
}
.main__fluid {
display: flex;
flex: 1;
}
.main__fluid--image {
background: url(https://i.imgur.com/eRnGawp.jpg);
background-size: cover;
background-repeat: no-repeat;
position: relative;
}
.main__inner-block {
display: flex;
align-items: flex-end;
position: relative;
height: 520px;
width: 50%;
margin-top: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: 3rem;
border-radius: 10px;
box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, 0.28);
z-index: 9;
}
.main__inner-block--image-mask {
overflow: hidden;
}
.image {
position: absolute;
width: 100%;
height: 100%;
left: 0;
bottom: 0;
background: url(https://i.imgur.com/Piu55zF.jpg);
background-repeat: no-repeat;
background-position: top -36rem center;
max-width: 100%:
}
.main__navigation {
height: 80px;
width: 100%;
background-color: #5ec8c3;
position: relative;
}
.footer {
background-color: #1f5c71;
height: 91px;
position: relative;
top: -5rem;
}
<div class="main-container">
<div class="main__fluid main__fluid--image">
<div class="main__inner-block main__inner-block--image-mask">
<div class="image"></div>
</div>
</div>
</div>
Currently have this one:
jsfiddle
jsfiddle (UPD)
UPD: found somewhat partial solution
I will assign parent for big image (which is with blending mode)
and child for smaller image (which is without blending mode)
Actually I just deleted property background-size from parent or/and add background-size: auto auto to its style, the idea is to, of course, prevent resizing on Y axis. Then did tweaks for child to fit it relative parent through background-position and the last one, aligned them centered with background-position: center. Updated jsfiddle with these changes.

Answer 1

Try this css block. It will align both images into same position.
.main-container {
display: flex;
height: 1172px;
width: 100%;
position: relative;
}
.main__fluid {
display: flex;
flex: 1;
}
.main__fluid--image {
background: url(https://i.imgur.com/Piu55zF.jpg);
background-size: cover;
position: relative;
background-color: #51c8c4;
background-blend-mode: multiply;
background-repeat: no-repeat;
background-position: top -27rem center;
}
.main__inner-block {
position: relative;
height: 45%;
width: 80%;
margin-top: 20.5%;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
box-shadow: 1px 2px 1px 0px rgba(0, 0, 0, 0.28)
}
.main__inner-block--image-mask {
overflow: hidden;
}
.image {
position: relative;
width: 100%;
height: 100%;
background: url(https://i.imgur.com/Piu55zF.jpg);
background-repeat: no-repeat;
background-position: top -45rem center;
}