改[Airbnb模写]重なってしまいます

Airbnbの模写をしています。
https://www.airbnb.jp/host/homes

トップの画像と文字の関係がうまくいきません。
簡素化したコードを貼ります。
画面を狭くすると、position:absoluteでベージュの面にのせていた赤色の面を元の位置に戻し、代わりにベージュの面を下にもぐらせるイメージで作りました。しかし、後に続くはずのピンクの面がかぶさってしまいます。ピンクの面を赤（青）の面に続けたいのですが方法はありますか？
このやり方では無理であれば、Airbnbのやり方を知りたいのですが、検証で見ても複雑で、解説していただけないでしょうか。

それからsassの場合、メディアクエリの場所は後ろの方にまとめず要素ごとでいいのでしょうか？

よろしくお願いします。

html
1<body>
2
3  <section class="landing">
4    <div class="img"></div>
5    <div class="sqrRed">
6      <h2>あいうえおかきくけこさしすせそたちつてとなにぬねのは</h2>
7      <div class="sqrBlue">
8
9      </div>
10    </div>
11    <div class="sqrPink">
12    </div>
13  </section>
14  
15</body>

sass
1body {
2  position: relative;
3}
4
5h2 {
6  font-size: 40px;
7  line-height: 40px;
8  font-weight: 800;
9  color: #333;
10}
11.container {
12  width: 1032px;
13}
14
15.landing {
16  .img {
17    position: relative;
18    text-align: center;
19    margin: 0 auto;
20    background-color: beige;
21    width: 100%;
22    height: 600px;
23
24    @media (max-width: 1128px) {
25      position: absolute;
26      z-index: -1;
27    }
28  }
29  .sqrRed {
30    position: absolute;
31    width: 460px;
32    height: 420px;
33    background-color:red;
34    top: 140px;
35    right: 90px;
36    border: 2px solid red;
37
38    @media (max-width: 1128px) {
39      position: relative;
40      background-color: transparent;
41      width: 100%;
42      height: 100%;
43      top: 260px;
44      right: 0;
45    }
46
47    h2 {
48      width: 400px;
49      margin: 0 auto 20px;
50      @media (max-width: 1128px) {
51        width: 100%;
52        color: #fff;
53      }
54    }
55    .sqrBlue {
56      background-color: skyblue;
57      width: 90%;
58      height: 60%;
59      margin: 0 auto;
60      @media (max-width: 1128px) {
61        width: 100%;
62        height: 400px;
63      }
64    }
65  }
66
67  .sqrPink {
68    background-color: pink;
69    height: 400px;
70    position: relative;
71  }
72}
73