CSS - 响应内容，包括文本

Question

我试图创建以下内容，我的目标是在任何屏幕分辨率上完全显示它：

我提出了以下HTML：

<div id="banner-homepage">
        <img class="pen1" src="img/pen.png" alt="">
        <img class="pen2" src="img/pen.png" alt="">
        <img class="pravitko" src="img/pravitko.png" alt="">
        <img class="kruzitko" src="img/kruzitko.png" alt="">

        <div class="container">
            <div class="banner-content">
                <h2><?php echo $atts['banner_title'];?></h2>
                <?php echo $atts['banner_content']?>
            </div>
            <div class="counter">
                <img class="pocitadlo" src="img/pocitadlo.png" alt="">
            </div>
        </div>
    </div>

我拥有的CSS是：

#banner-homepage {
    background: url("../img/home_banner_bg.png");
    position: relative;
    width: 100%;
    height: 300px;
    display: block;
    overflow: hidden;
}

#banner-homepage .container {
    width: 50%;
    text-align: left;
    margin-left: 25%;
}

#banner-homepage .banner-content, #banner-homepage .counter {
    width: 50%;
    float: left;
}

.pen1 {
    position: absolute;
    left: 0;
    top: 20%;
    -ms-transform: rotate(40deg); /* IE 9 */
    -webkit-transform: rotate(40deg); /* Chrome, Safari, Opera */
    transform: rotate(40deg);
    width: 15%;
    height: auto;
}

.pen2 {
    position: absolute;
    left: 30%;
    bottom: -10%;
    width: 15%;
    height: auto;
}

.pravitko {
    position: absolute;
    right: -10%;
    top: 5%;
    width: 25%;
    height: auto;
}

.kruzitko {
    position: absolute;
    right: 10%;
    bottom: 5%;
    width: 15%;
    height: auto;
}

.pocitadlo {
    width: 100%;
    height: auto;
}

这远非完美，因为文字没有调整大小。我的目标是调整横幅大小，所以无论你在什么设备上看它都看起来都一样......

调整横幅大小的正确标记是什么，包括文字？