<mat-card appearance="outlined" class="product-card" [routerLink]="[routes.PRODUCT, product.id]">
  <div class="product-media">
    <img src="{{product.image}}" alt="{{product.title}}" class="product-img">
    <span
      class="product-status"
      [ngClass]="product.status === 'Sale' ? 'sale' : 'new'"
    >
      {{product.status}}
    </span>
  </div>

  <div class="product-title-wrapper">
    <p class="product-title">{{product.title}}</p>
    <p class="product-subtitle">{{product.subtitle}}</p>
  </div>

  <div class="product-price-wrapper">
    <p class="product-price">{{product.price}}</p>

    <div class="product-pop-wrapper">
      <p class="product-pop">{{product.rating}}</p>
      <mat-icon color="accent" class="pop-icon">star</mat-icon>
    </div>
  </div>
</mat-card>
