как убрать высоту между этими картами

Question

Высота этих карт переменная, здесь я использую angular библиотеку материалов и bootstrap мне нужно уменьшить горизонтальное пространство между картами, чтобы вы могли видеть карты, железный трон и изображение женщины заняло слишком много места между их

это HTML компонента списка элементов, я использую Bootstrap и angular материал

<div class="row">

  <app-item *ngFor="let item of items" [item]="item"></app-item>
</div>

вот код ts

import {Component, OnDestroy, OnInit} from '@angular/core';
import {Subscription} from "rxjs";
import {Item} from "../../models/item.model";
import {ItemsService} from "../items.service";

@Component({
  selector: 'app-item-list',
  templateUrl: './item-list.component.html',
  styleUrls: ['./item-list.component.css']
})
export class ItemListComponent implements OnInit, OnDestroy {

  items: Item[] = [];
  isLoading = false;

  totalItems = 0;
  // itemsPerPage = 2;
  // currentPage = 1;
  // pageSizeOptions = [1, 2, 5, 10];

  private itemsSub: Subscription;


  constructor(private itemsService: ItemsService) {
  }

  ngOnInit(): void {
    this.isLoading = true;
    this.itemsService.getItems();

    this.itemsSub = this.itemsService.itemsUpdateListener.subscribe(items => {
      this.isLoading = false
      this.items = items
    })
  }

  ngOnDestroy(): void {
    this.itemsSub.unsubscribe();
  }

}

вот HTML ItemComponent

<div class="col-lg-3 col-md-4 col-sm-6">
  <div class="card" style="width: 18rem;">
    <a routerLink="">
      <div class="card-img-wrap"><img class="card-img-top" [src]="item.imagePath" [alt]="item.title"></div>
    </a>
    <div class="card-body">
      <span class="card-title">{{item.title}}</span>
      <br>
      <span class="card-text" style="margin-right: 3px">Rs. {{item.price}}</span>
    </div>
  </div>
</div>

в ts itemComponent есть только одно свойство

@Input() item: Item;

и вот css компонента ItemComponent

.card-img-wrap {
  overflow: hidden;
  position: relative;
}
.card-img-wrap:after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.2);
  opacity: 0;
  transition: opacity .6s ease-in-out;
}
.card-img-wrap img {
  transition: transform .6s ease-in-out;
  width: 100%;
}
.card-img-wrap:hover img {
  transform: scale(1.1) ;
}
.card-img-wrap:hover:after {
  opacity: 0.5;
}