HTML/CSS absoluteで流動的な画像3枚とテキストのまとまり　レスポンシブ対応

HTML/CSSでデザインカンプからLPを制作しています。

そのトップ画面で、左側に配置と角度が不規則な3枚の画像と、見出しなどのテキスト群が横並びになっているデザインがあります。それについてわからないことが2点あります。

1点目はレスポンシブ対応です。PC表示ではposition:absoluteでカンプ通りに配置すればいいと思うのですが、画面幅を縮めると画像とテキストが被ってしまいます。画像が横滑りせずに意図したところに配置できる方法を教えてほしいです。

2点目はこのトップのbackground-imageをどのサイズでも同じところが見えてほしいのですが、サイズにより見える部分が変わってしまうことです。どんなサイズでも同じ部分が表示される方法があれば教えてほしいです。

HTML
1<div id = "top">
2    <div class = "flex">
3        <div class = "flex-item1">
4            <img src = "写真1">
5            <img src = "写真２">
6            <img src = "写真3">
7            <img src = "写真吹き出しの上の">
8        </div>
9        <div class = "flex-item2">
10            <h1>
11                見出しテキスト見出しテキスト見出しテキスト見出しテキスト見出しテキスト見出しテキスト見出しテキスト
12            </h1>
13        </div
14    </div>
15
16    <div class = "column-flex">
17        <div class = "flex-item3">
18            <p>テキストテキストテキストテキストテキスト</p>
19        </div>
20        <div class = "flex-item4">
21            <div>ボタン</div>
22        </div>
23    </div>
24</div>

CSS
1#top{
2    background: url(../img/背景.jpg);
3    background-size: cover;
4    background-repeat: no-repeat;
5    background-position: 0px -900px;
6    background-color: rgba(255,255,255,0.8);
7    background-blend-mode: lighten;
8}
9.flex{
10    display:flex;
11    flex-wrap:wrap;
12    justify-content:space-around;
13}
14.flex-item1,.flex-item2{
15    width:50%;
16}
17.flex-item1 img{
18    position:absolute;
19    top:任意px;
20    left:任意px;
21    height:300px;
22    width:300px;
23    z-index:1000;
24}
25.flex-item2 h1{
26    font-size:3rem;
27}
28@media screen and (max-width:640px){
29    .column-flex{
30        display:flex;
31        align-items:column-reverse;
32    }
33}