Как исправить мой CSS, чтобы разместить статические изображения в заголовке?

Question

Проблема начинается, когда окно становится меньше, чем 1310px ..

Кроме того, центральное изображение обрезается при уменьшении ширины изображения ниже 1202 пикселей.

CSS

#header-wrap {
    background: #ffffff url('../images/header/BGPATTERNx2.jpg') center center;
    margin-left: 15px;
    margin-right: 15px;
    min-height: 130px;
    min-width: 75px;
    display: flex;
    flex-flow: row nowrap;
}

.header-img-left {
    background-image: url('../images/header/LEFTx2.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: left;
    background-position-y: center;
    flex: 1;
}

.header-img-title {
    background-image: url('../images/header/SIGNx2.png');
    background-repeat: no-repeat;
    background-position-x: left;
    background-position-y: bottom;
    margin-bottom: 16px;
    /*margin-left: 16px;*/
    transform: scale(.5) translate(-50%, 50%);
    flex: 3;
}

.header-img-right {
    background-image: url('../images/header/RIGHTx2.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: center;
    flex: 2;
}

HTML

<div class="row bottom-align-parent">
    <div id="header-wrap">
        <div class="header-img-left">
        </div>
        <div class="header-img-title">
        </div>
        <div class="header-img-right">
        </div>
    </div>
</div>