<!--Grid row-->
<div class="row" *ngFor="let car of carList">
    <!--Grid column-->
    <div class="col-lg-4 mb-4">
      <!--Featured image-->
      <div class="view overlay hm-white-slight z-depth-1-half" (click)='carDetails(car)'>
        <img  *ngIf="car.model.mTS; else defaultImg" src={{car?.model?.mTS}} class="img-fluid" alt="First sample image">
        <ng-template #defaultImg>
          <img src='https://cpb-ap-se2.wpmucdn.com/global2.vic.edu.au/dist/b/17690/files/2014/03/url-2-2k4i0gj.jpeg' class="img-fluid" alt="First sample image">
        </ng-template>
        <a>
          <div class="mask waves-effect waves-light"></div>
        </a>
      </div>
    </div>
    <!--Grid column-->

    <!--Grid column-->
    <div class="col-lg-7 ml-xl-4 mb-4">
      <!--Excerpt-->
      <a href="" class="teal-text"><h6 class="pb-1"><i class="fa fa-heart"></i><strong> {{car?.model?.aMC}} </strong></h6></a>
      <h4 class="mb-3"><strong>{{car?.model?.mD}}</strong></h4>
      <p>{{car?.exterior?.color?.cd}}</p>
      <img *ngIf="car?.exterior?.color?.tI" src={{car?.exterior?.color?.tI}} class="img-fluid" alt="Color Image">
    </div>
    <!--Grid column-->
  </div>
  <!--Grid row-->