Компонент Angular 6, применить css к классу, применяемому с привязкой к хосту?

Обычно я использую глобальный файл SCSS в своих приложениях, но сегодня я хотел ограничить область действия scss только моим компонентом.

Я установил класс для компонента через @HostBinding (из class.card).

Я могу стилизовать элементы внутри моего компонента, например caard-body, но как я могу применить переопределения к классу card этого компонента?

Другими словами, у меня на странице несколько карточек. У меня есть стили, которые я хочу применить только к этой карточке, чтобы она выглядела по-другому. Поэтому я хотел бы применить css, например

.card { background-color: violet; }

Так что фиолетовым только эта карта. Я хочу сделать этот CSS частью этого компонента, поэтому везде, где я его использую, он автоматически будет фиолетовой картой. (На самом деле я хочу большего, чем простая вещь, но вы поняли идею)

Мой компонент TS:

import { Component, Input, HostBinding } from '@angular/core';

@Component({
  selector: 'app-reviews',
  templateUrl: './reviews.component.html',
  styleUrls: ['./reviews.component.scss']
})
export class ReviewsComponent {
  @HostBinding('class.card')
  true;

  @Input()
  review;

  constructor() {}
}

Мой компонент SCSS:

.card-header {
  border: 0;
  color: #cf0989;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 2rem;
  font-weight: normal;
}

.card-body {
   ...
}

Мой компонент HTML:

<div class = "card-header">Testimonials</div>
<div class = "card-body">

  <div class = "review-image">
    <img class = "rounded-circle"
        alt = "{{review.acf.article_author.post_title}}"
        src = "{{review.acf.article_author.acf.image}}">
  </div>

  <div class = "review-content">
    <p class = "review">
      <span [innerHTML] = "review.content.rendered"></span>
    </p>
    <p class = "reviewer-name">{{review.acf.article_author.post_title}}</p>
  </div>

</div>

Селекторы в моем CSS для .card-body и .card-header работают нормально, но я не могу стилизовать этот .card. Добавление этого, например, ничего не делает:

.card { background-color: violet: }

Как я могу создать селекторы SCSS в файле SCSS компонента, которые также применимы к классу, примененному к компоненту через @HostBinding? Могу я? Нужно ли мне?