画面幅を狭めた時、背景画像と一緒に上にのせている要素も縮小するようにしたい

実現したいこと

画面幅を狭めたときに、背景画像の上にのせている白いボックスが一緒に縮小するようにしたいです。
背景画像は画面幅いっぱいに表示される＋レスポンシブで設定しています。
https://jsfiddle.net/rupL3wfc/

発生している問題・エラーメッセージ

画面最大幅では背景（紅茶画像）の左のあたりに白いボックスが表示されますが、画面幅を縮小していくとこの白いボックスの位置がどんどんずれてしまいます。
背景画像との比率を保ったままうまく縮小する方法を教えてください。

該当のソースコード

HTML

<div id="wrapper"> <div class="Box"> <h2>タイトル</h2> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> </div>

css

#wrapper { position: relative; width: 100%; min-height: 100vh; background: url("https://www.pakutaso.com/shared/img/thumb/ellycollection074_TP_V.jpg") center / cover;} .Box { position: absolute; top: 50%; left: 29%; transform: translateY(-50%) translateX(-29%); -webkit-transform: translateY(-50%) translateX(-29%); -ms-transform: translateY(-50%) translateX(-29%); max-width: 392px; max-height: 357px; background: #fff; padding: 50px;} .Box h2 { margin: 0; padding: 0; font-size: 18px;} .Box p { margin-top: 25px; font-size: 12px; line-height: 35px;}

試したこと

メディアクエリを使用して画面幅ごとに「left：29%」の数値を減らして調整してみましたが、メディアクエリの指定がたくさん増えてしまい、もっと他に適切なやり方があれば知りたいと思っています。