<div class="grid gap-fluid-md grid-cols-[repeat(auto-fill,minmax(min(100%,450px),1fr))] max-w-app mx-4 mt-auto">
  <h1 class="m-0 mb-2 text-[clamp(1.4rem,4vw,2rem)]">{{ 'ALGORITHM.TITLE' | translate }}</h1>
</div>
<div class="grid gap-fluid-md grid-cols-[repeat(auto-fill,minmax(min(100%,450px),1fr))] max-w-app mx-4 mt-auto">
  @for (category of categories; track category.id) {
    <mat-card class="card-gradient-bar transition-transform duration-200 ease-in-out flex flex-col cursor-pointer hover:-translate-y-1 hover:shadow-[0_8px_24px_rgba(0,0,0,0.12)]" [routerLink]="[category.routerLink]">
      <mat-card-content>
        <div class="flex items-center text-[var(--mat-sys-primary)] mb-4">
          <mat-icon class="!text-[26px] !w-[26px] !h-[26px]">{{ category.icon }}</mat-icon>
        </div>
        <h3 class="text-[1.05rem] font-semibold mb-2 m-0">{{ category.title | translate }}</h3>
        <p class="m-0 opacity-75 text-sm leading-relaxed">{{ category.description | translate }}</p>
      </mat-card-content>
    </mat-card>
  }
</div>
