How to center a Cropped Grid?

How to center a child div that is cropped by top and bottom?

There are plenty of uses cases and solutions for cropping and centering a single image, but in my case I have a complete grid consisting of images and text blocks.

In my example I have a grid with two images above each other as a left column and a text block as the right column, centered vertically. I want to apply a fixed height to the container, but make sure the text-block on the right is always centered vertically while the images on the left are supposed to be trimmed at the top and bottom.

So the entire grid-block is always supposed to stay centered vertically, cutting the images' top and bottom area. Basically the 20px gap between the images must always stay in the middle of the 400px height.

HTML:

    .container{
      height: 400px;
      overflow: hidden;
      .grid{
        gap: 20px;
        transform: translateY(-50%);
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: 
          "a b" 
          "c b";
      }
    }

    <div class="container">
      <div class="grid">
        <div class="item_a"><img/></div>
        <div class="item_b">Text Block...</div>
        <div class="item_c"><img/></div>
      </div>
    </div>

CSS:

        .container{
          height: 400px;
          overflow: hidden;
          .grid{
            gap: 20px;
            transform: translateY(-50%);
            grid-template-columns: repeat(2, 1fr);
            grid-template-areas: 
              "a b" 
              "c b";
          }
        }

So far I can get this only working for a wide desktop view, but as soon as I squeeze down the viewport, the content shifts vertically off the center, covering more and more from the top area.
How can I achieve a constantly centered crop for all viewports?