如何使 CSS 横幅响应。它必须在较小的屏幕上改变它的高度和宽度

Question

我希望我的横幅（使用 CSS 创建）表现得像图像，并在较小的屏幕上查看时保持纵横比。横幅有一个 bgcolor，使用位置放置在上面的两个单独的图像，以及一些文本。

对象（图像和文本）不断靠近彼此并重叠。我希望对象改变它们的大小。图片和文字应该变小，并保持它们之间的空间，这样它在手机上看起来和在电脑屏幕上看起来一样。

如果横幅作为一个整体，包含所有文本和图像，表现得像图像，问题就解决了。

    <section id="model-banner">
        <div id="model1"><img src="images/banner/My project (2).png" alt=""></div>
        <div id="model2"><img src="images/banner/My project.png" alt=""></div>
        <div id="box1"><h1>BUY 1 GET 1</h1>
        <div id="free1"><h1 >FREE</h1></div></div>
        <div id="box2">
            <h2>BUY 1 GET 1</h2>
            <div id="free2"><h2>FREE</h2></div>
        </div>
       
        <div id="usecode">USE CODE: <span>DAPPER</span></div>
        <button>SHOP NOW</button>
    </section>

#model-banner{
    background-color: #c98aac;
    height: 800px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    font-family: sans-serif;
}

#model-banner h1{
    font-size: 140px;
    font-weight: 900;
    line-height: 200px;
    color:#c98aac ;
    text-shadow: 1px 1px 0px white, -1px -1px 0px white,
    1px -1px 0px white, -1px 1px 0px white;
}
#free1 h1{
    font-size: 320px;
}
#model-banner #box1{
    position: absolute;
    top: 180px;
    left: auto;
    right: auto;
}
#model-banner h2{
    font-size: 80px;
    font-weight: 900;
    line-height: 100px;
    color:white ;
    text-shadow: 2px 2px 0px rgb(10, 48, 73),
     -2px -2px 0px rgb(7, 40, 63),
      2px -2px 0px rgb(10, 48, 73),
     -2px 2px 0px rgb(7, 46, 71);
}
#free2 h2{
    font-size: 180px;
    line-height: 140px;
}
#model-banner #box2{
    position: absolute;
    top: auto;
    left: auto;
    bottom: auto;
    right: auto;
}
#model-banner #model1 img{
    width: 22vw;
    height: 87vh;
    position: absolute;
    top: -15px;
    left: 90px;
    z-index: 1;
}
#model-banner #model2 img{
    width: 22vw;
    height: 75vh;
    position: absolute;
    top: 97px;
    right: 160px;
    z-index: 1;
}
#model-banner #usecode{
    background-color: white ;
    color: #c98aac;
    font-size: 40px;
    font-weight:lighter;
    transform: scale(0.8,1.2);
    margin: 0px;
    padding: 0px 30px 0px 30px;
    position: absolute;
    bottom: 100px;
}