coverなのに画像の高さが無効化される

bootstrap4でサムネイルリストを作りましたが、そのCSSでobject-fitにcoverとしたにも関わらず、画像の高さがcoverになりません。どうすれば改善するのでしょうか?

HTML

<div class="container">

  <div class="row">
    <div class="col-6">
      <div class="row">
        <a href="#" class="theme-color-text w-100">
          <img src="https://placeimg.com/600/500/animals" class="image">
        </a>
      </div>
    </div>
    <div class="col-6">
      <div class="row">
        <a href="#" class="theme-color-text w-100">
          <img src="https://placeimg.com/150/50/animals" class="image">
        </a>
      </div>
    </div>

</div>

CSS

.text {
  position: relative;
}

.text::before {
  margin-top: 10px;
  display: block;
  content: "";
  padding-top: 100%;
}

.image {
  width: 100%;
  margin-top: 10px;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}