'Multiple Mix Blend Modes

Is it possible to have multiple mix-blend-modes to create different div background layers?

Currently, the body has a fixed background image. There is a div (main container) which uses mix-blend-mode:soft-light and the background-color:white which creates a layer above the body image.

I am adding a div inside of the main container, which will use the same, mix-blend-mode:soft-light in order to create a new layer on top. Instead, it is displaying the same colour as the main container, instead of a further overlaid colour.

HTML

<body>
<div class="container">
     <div id="headerBackground"></div>  
</div>
</body>

CSS

body {
    background-color: #21224f;
    background-image:url('https://i.ibb.co/chww3Zd/bg.jpg');
    width:100vw;
    height:100vh;
    background-repeat:no-repeat;
    background-size:cover;
    margin:0;
    max-height:100vh;
    overflow:hidden;
}

/* inner section - background */
.container{
    max-width:1280px;
    width:100vw;
    background-color:#fff;
    mix-blend-mode:soft-light;
    height:100vh;
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    border-radius:20px;
}
#headerBackground{
    height: 140px;
    background-color: #fff;
    width: 1280px;
    mix-blend-mode: soft-light;
    border-radius:20px;
}

JS Fiddle -> https://jsfiddle.net/9cjgtwbp/4/

Here is a link to the desired effect -> https://i.ibb.co/nwZP9sG/000-wireframe-dark.jpg

Here is how it currently looks -> https://i.ibb.co/SKX3xSH/Screenshot-2022-04-11-at-14-49-24.png

Any help or guidance would be greatly appreciated!