Высота не учитывается в CSS

Question

У меня есть эта кодовая ручка

Я дал родительскому элементу .MainPost высоту 90vh, но изображения внутри дочернего элемента не учитывают эту высоту.

Надеюсь, есть способ это исправить, вот код:

@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css?family=Shadows+Into+Light&display=swap');
@font-face {
  font-family: myFirstFont;
  src: url(/Fonts/Westony.ttf);
}

* {
  font-family: sans-serif;
  margin: 0;
}

html {
  box-sizing: border-box;
  font-family: "Roboto";
}

*,
*:before,
*:after {
  box-sizing: inherit;
}


/* Header */

header {
  display: flex;
  flex-direction: column;
  min-height: 10vh;
  width: 100%;
}

nav {
  display: flex;
  height: 80%;
  align-items: center;
  background-color: #E7717D;
  justify-content: space-between;
}

.nav-links {
  display: flex;
}

.nav-links li a {
  margin-left: 1rem;
}

.sm-links {
  display: flex;
  justify-content: flex-end;
}

.sm-links {
  flex-basis: 25%;
  display: flex;
  justify-content: center;
}

.sm-links li a {
  margin-left: 1rem;
}

.nav-links {
  flex-grow: 1;
}

li {
  list-style: none;
}

li a {
  text-decoration: none;
  color: #111;
  text-transform: uppercase;
}

.brand {
  display: flex;
  justify-content: center;
  height: 20%;
}

.brand h1 {
  font-family: myFirstFont;
}

.MainPost {
  display: grid;
  grid-template-columns: 2fr 1fr;
  height: 70vh;
  column-gap: 1rem;
  row-gap: 1rem;
}

.firstPost {
  width: 100%;
  height: 100%;
  position: relative;
  grid-row-start: 1;
  grid-row-end: 3;
}

.firstPost img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.PositionnedText {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

.SecondPost {
  width: 100%;
  position: relative;
  height: 100%;
}

.SecondPost img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.PositionnedText {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

.ThirdPost {
  width: 100%;
  height: 100%;
  position: relative;
}

.ThirdPost img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.PositionnedText {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

<header>
  <nav>

    <ul class="nav-links">
      <li><a href="">TECH</a></li>
      <li><a href="">SCIENCE</a></li>
      <li><a href="">Startups</a></li>
    </ul>
    <ul class="sm-links">
      <li><a href=""><i class="fa fa-facebook-f"></i></a></li>
      <li><a href=""><i class="fa fa-twitter"></i></a></li>
      <li>
        <a href=""> <i class="fa fa-instagram"></i></a>
      </li>

    </ul>
  </nav>
  <div class="brand">
    <h1>Tech BLOG</h1>
  </div>
</header>
<section class="MainPost">
  <div class="firstPost">
    <img src="https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
    <div class="PositionnedText">
      <h3>Technology</h3>
      <h1>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</h1>
      <p>by admin, 1 day ago</p>
    </div>
  </div>
  <div class="SecondPost">
    <img src="https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
    <div class="PositionnedText">
      <h3>Technology</h3>
      <h1>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</h1>
      <p>by admin, 1 day ago</p>
    </div>
  </div>
  <div class="ThirdPost">
    <img src="https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
    <div class="PositionnedText">
      <h3>Technology</h3>
      <h1>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</h1>
      <p>by admin, 1 day ago</p>
    </div>
  </div>


</section>
<script src="https://use.fontawesome.com/68a83379c5.js"></script>

Спасибо за вашу помощь заранее