<mat-card appearance="outlined" class="card">
  <div class="media-wrapper">
    <img [src]="result.img" [alt]="result.title" class="img">
  </div>

  <mat-card-content class="content">
    <div class="description-wrapper">
      <p class="subtitle">{{result.subtitle}}</p>
      <h3 class="title">{{result.title}}</h3>
      <p class="description">{{result.description}}</p>
    </div>

    <div class="price-wrapper">
      <p class="price-label">From</p>
      <p class="price">{{result.price}}</p>
      <p class="price-period">per week</p>
      <button mat-raised-button color="primary" class="learn-button">Learn more</button>
    </div>
  </mat-card-content>
</mat-card>
