So I'm trying to stack images on top of each other using absolute positioning, but I want to have some kind of descriptive text next to those images so I did this

<div class="container">
  <div class="text-box">
    <h2 class="heading-secondary">
      Lorem ipsum dolor, sit amet consectetur adipisicing.
    </h2>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Itaque,
      Lorem ipsum dolor sit amet. culpa.
    </p>
    <h2 class="heading-secondary">Lorem ipsum dolor sit amet.</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat,
      suscipit?
    </p>
  </div>
  <div class="img-box">
    <img src="/img/photo-1.jpg" class="img img--1" />
    <img src="/img/photo-2.jpg" class="img img--2" />
    <img src="/img/photo-3.jpg" class="img img--3" />
  </div>
</div>

here we have 2 divs next of each other, I set their parent display to grid and it's columns like this using auto-fit to make it responsive

 .container {
    max-width: 114rem;
    margin: 15rem auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, 57rem);
    @media (max-width: 81.25em) {
      grid-template-rows: 1fr 1fr;
      align-items: center;
    }
  }
  h2 {
    font-size: 3rem;
  }
  p {
    font-size: 2rem;
    line-height: 1.5;
  }
  .img-box {
    position: relative;
  }
  .img {
    width: 45%;
    position: absolute;
  }
  .img--1 {
    top: 0%;
    left: 4%;
  }
  .img--2 {
    top: 19%;
    left: 24%;
  }
  .img--3 {
    top: 43%;
    left: 8%;
  }

when I use responsive mode in chrome dev tools the images container loses it's height when window hit 1280PX turning off align-items: center, seems to make the images container regained it's height again what I want to understand is:

1-why in the first place the Images container have height even though all of it's children are positioned absolutely?

2- why does the container regain it's height by turning off align-items: center?