<div class="feature-card-container">
  <div
    class="feature-card"
    (mouseenter)="isHovered = true"
    (mouseleave)="isHovered = false"
    [ngClass]="{ 'hover-state': isHovered }"
    [ngStyle]="{ 'text-align': textAlign }"
  >
    <!-- brilho sutil -->
    <span class="shine" aria-hidden="true"></span>

    <!-- header -->
    <div class="card-head">
      <div class="icon-wrap" aria-hidden="true">
        <i class="card-icon {{ iconClass }}"></i>
      </div>

      <h3 class="card-title">
        {{ title }}
      </h3>
    </div>

    <!-- descrição -->
    <p class="card-description">
      <span [innerHTML]="description"></span>
    </p>

    <!-- linha decorativa -->
    <div class="card-accent" aria-hidden="true"></div>
  </div>
</div>
