背景斜めの図形に対して配置した画像の位置をレスポンシブで表示した時、WEBサイトで表示した時の位置を比率で維持したいですが上手くできません。

背景斜めの図形に対して画像をブレンドモード：乗算（mix-blend-mode: multiply;）を使用して
図形と重ねて配置しました。
配置した時、図形との重なり具合が、WEBサイト、スマホで表示した時、それぞれで異なってしまします。
理想としては、WEBサイトで表示した時の見え方で、比率を維持して、レスポンシブで表示したいと
考えております。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4
5<title>テスト</title>
6
7
8<link rel="stylesheet" href="./css/style.css">
9
10</head>
11
12<body>
13
14<!-- partial:index.partial.html -->
15<section>
16  <div class="inner">
17    <h1>Title</h1>
18        <div class="top-img"><img src="https://uploda4.ysklog.net/c20a6d522fafe57d114e96c58725788c.jpg
19" alt="仮画像"></div>
20    <p>Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. </p>
21  </div>
22</section>
23<section class="slant-section">
24  <div class="inner">
25    <h2>Slant Layout</h2>
26    <p>Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. </p>
27    <p>Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. </p>
28    <p>Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. </p>
29  </div>
30</section>
31<section>
32  <div class="inner">
33    <h2>Title</h2>
34    <p>Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. </p>
35  </div>
36</section>
37    
38    <section class="slant-section">
39  <div class="inner">
40    <h2>Slant Layout</h2>
41    <p>Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. </p>
42    <p>Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. </p>
43    <p>Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. </p>
44  </div>
45</section>
46<!-- partial -->
47    
48    
49</body>
50</html>

css
1body {
2  margin: 0;
3  background: #fff;
4}
5
6section {
7  position: relative;
8  box-sizing: border-box;
9}
10section .inner {
11  position: relative;
12  padding: 50px;
13  max-width: 1024px;
14  margin: auto;
15}
16
17.slant-section {
18  margin: 200px auto; /* 白余白 */
19}
20
21@media screen and (max-width:350px) { 
22    .slant-section{
23        margin: 20px auto;
24    }
25}
26
27.slant-section:before {
28  content: "";
29  display: block;
30  position: absolute;
31  top: -50px;
32  z-index: -1;
33  width: 100%;
34  height: 150%;
35  background: #c90b0b;
36  transform: skewY(-10deg);
37}
38.slant-section + section:before {
39  content: "";
40  display: block;
41  position: absolute;
42  top: -50px;
43  z-index: -1;
44  width: 100%;
45  height: 100%;
46  background: #fff;
47  transform: skewY(-10deg);
48}
49
50.top-img {
51	max-width:100%;
52	height: auto; ;
53	border:none;
54	top: 50px;
55	right: 10px;
56	opacity: 0.7;
57	mix-blend-mode: multiply; /* 乗算 */
58	position: absolute;
59}

試したこと

CSSの
.slant-section {
margin: 200px auto; /* 白余白 */
}
部分に様々な変更を加えてみました。
position: absolute;、position: relative;を加えてみたり、
margin: 200px auto;のpxをvwや％で試してみました。
また.slant-sectionに対して@media screen and〜のコードを
色々調べながら手探りで試してみましたが、上手くいかず、PC、スマホ、ipadで
それぞれで表示が異なってしまいます。