Центрирование двух изображений с помощью flexbox

Question

У меня такая ситуация:

<div class="slot_twoimages">
<article class="slot image">
  <img src="https://via.placeholder.com/560x441" />
</article>
<article class="slot image">
  <img src="https://via.placeholder.com/560x441" />
</article>
<article class="slot text">
  <div class="headline">HEADLINE</div>
</article>

с этим стилем:

.slot_twoimages {

  height: auto;
  background-image: linear-gradient(120deg, yellow, pink);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;   
  .slot.image {
    //margin: 121px 40px 64px;
    display: inline-block;
    flex: 50%;
   //DA RIMUOVERE
    img {
        max-width: 560px;
        max-height: 441px;
    }
  }
  .slot.text {
      width: 100%;
      display: block;
      text-align: center;
      margin: 0 30% 88px; 
      margin-bottom: 88px;

      .headline {
          font-size: 29px;
          margin-bottom: 50px;
          letter-spacing: -0.015em;
          padding-top: 24px;
          padding-bottom: 10px;
      }
    } 
}

Теперь я хочу центрировать два изображения с помощью flexbox, и мне нужноцентральный слот текста под двумя изображениями.Мне нужно сохранить изображения в одном и том же положении, и необходимо масштабирование изображения.Я не могу изменить DOM.

Вот мой кодовый блок: https://codepen.io/andrew_88/pen/rqpxMP

Answer 1

CSS-часть

    .slot_twoimages {
    height: auto;
    background-image: linear-gradient(120deg, yellow, pink);
    display:grid;
    grid-template-columns: 0.5fr 1fr 0.5fr;

  }
  .slot_twoimages .slot.image {

  }
  .slot_twoimages .slot.image img {
    max-height: 441px;
  }
  .slot_twoimages .slot.text {
    width: 100%;
    display: block;
    text-align: center;
    margin-bottom: 88px;
  }
  .slot_twoimages .slot.text .headline {
    font-size: 29px;

  }

  #image1
  {
      grid-column: 2;
  }

  #image2
  {
      grid-column: 2;
  }

  #text1
  {
      grid-column: 2;
      text-align: center
  }

HTML-часть

<div class="slot_twoimages">
    <div id="image1" class="slot image">
      <img src="https://via.placeholder.com/560x441" />
    </div>
    <div id="image2" class="slot image">
      <img src="https://via.placeholder.com/560x441" />
    </div>
    <div id="text1" class="slot text">
      <div class="headline">HEADLINE</div>
    </div >
</div>

Результат: https://codepen.io/richardpariath3/pen/oapbRB

Обратите внимание, что я использовал CSS-сетки