how to remove the height between these cards - css

Question

The height of these cards are variable here I'm using angular material library and bootstrap
I need to reduce the horizontal space between the cards
you can see the cards iron throne and woman's image have taken too much space between them
this is the HTML of item-list component, I'm using Bootstrap and angular material
<div class="row">
<app-item *ngFor="let item of items" [item]="item"></app-item>
</div>
here's the ts code
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();
}
}
here's the HTML of 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>
in the ts of itemComponent there is only one property
#Input() item: Item;
and here's the css of 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;
}