css - レスポンシブでのグラデーションの問題を伴うcss複数の画像

Question

これが私の期待される出力です：

これが幅の私の生成された出力です375px。

そしてここにあります767px：

ここに私のcssコードがあります:

.content{
        width:100%;
        background-image: 
        url("./../../images/small/tantum-winter-home.jpg"),
        url("./../../images/small/tantum-dotts-house.png"),
        linear-gradient(90deg,#e8e6e6 50%, rgba(0,212,255,0) 20%);
        background-repeat: no-repeat, no-repeat;
        background-position: 65% 20%, right 56% bottom;
        height: 35rem;
    }

ここで2つの問題に直面しています：

1. 点線のパターンは、すべてのサイズで正確に始まっているわけではありません (767px を参照)。
2. 現在、高さ全体に適用されている下のポイントでグラデーションを制限する方法（点線パターンの開始点で停止する必要があります）。