Изображения со слайд-шоу не помещаются в контейнер автоматически

Question

У меня есть сетка, содержащая 5 элементов, и внутри одного из них находится контейнер для слайд-шоу с изображениями. Я не могу сказать, имеет ли контейнер неправильный размер (высоту), или сами изображения не устанавливаются автоматически в контейнер слайд-шоу.

Поскольку слайд-шоу проходит через изображения, ширина элемента сетки остается той же. Однако высота увеличивается, а затем уменьшается, когда всплывает определенное изображение.

Мое намерение состоит в том, чтобы контейнер слайд-шоу соответствовал тому же размеру, что и элемент сетки, и изображения также автоматически подгоняли контейнер элемента и слайд-шоу.

Макет сетки и контейнер css:

.item1 { grid-area: header;
  background-color: black;
  border: 2px solid orange;
  border-radius: 15px;
  color: white;
  font-family: 'Montserrat', cursive, sans-serif;
 }

.item2 {
  grid-area: menu;
  background-color: black;
  border: 2px solid orange;
  border-radius: 15px;
  width: 500px;
 }
.item3 {
  grid-area: main;
  background-color: yellow;
  width: 575px;
  border: 2px solid orange;
  border-radius: 15px;
 }
.item4 {
  grid-area: right;
  background-color: cyan;
  width: 475px;
  border: 2px solid orange;
  border-radius: 15px;
 }
.item5 {
  grid-area: footer;
  background-color: green;
  border: 2px solid orange;
  border-radius: 15px;
 }

.grid-container {
  display: grid;
  grid-template:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
  grid-gap: 4px;
  background-color: white;
  padding: 4px;
  height: 100vh;
}

.grid-container > div {
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

Контейнер для слайд-шоу и изображения css:

.slider-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.slide-images {
  display: none;
  max-width: 100%;
  max-height: 100%;
}

.text {
  font-family: 'Montserrat', cursive, sans-serif;
  font-size: 25px;
  text-align: center;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  color: white;
}

Изображения внутри элементов внутри элемента 3 макета сетки HTML:

<!---Grid item container 3: Image slideshow--->
  <div class="item3">
    <!---The slideshow container--->
    <div class="slider-container fade">
        <!---The slideshow images--->
        <div class="slider-images">
          <img src="images/marsrover.jpg" style="width:100%">
          <div class="text">Visit the original Mars rover landing sites!</div>
        </div>
        <div class="slider-images fade">
          <img src="images/sandboarding.jpg" style="width:100%">
          <div class="text">Go sandboarding on the Martian dunes!</div>
        </div>
        <div class="slider-images fade">
          <img src="images/luxurymall.jpg" style="width:100%">
          <div class="text">Explore thousands of unique Martian crafted luxuries</div>
        </div>
        <div class="slider-images fade">
          <img src="images/nightskydesert.jpg" style="width:100%">
          <div class="text">Stargaze with a light pollution free sky!</div>
        </div>
        <div class="slider-images fade">
          <img src="images/sandbuggy.jpg" style="width:100%">
          <div class="text">Ride sandbuggy's across the martian surface!</div>
        </div>
</div>
</div>