<div style="display: flex; flex-direction: column;">
  <div class="img-bann-grl" style="background-image:  url('{{typeBann}}');">
    <div class="height-50">
    </div>
    <div class="title-content">
      <span class="img-title">{{typeLine}}</span>
      <span class="red-label">Equipos</span>
    </div>
  </div>
  <div class="products" *ngIf="typeLine !== 'Por Aplicación'">
    <mat-spinner *ngIf="isLoading"></mat-spinner>
    <div class="card" *ngFor="let product of products" [routerLink]="['/linea', this.producto, product.ID]">
      <div class="card-content">
        <img class="prduct-img" [src]="product.img" alt="Avatar">
        <div class="title-container">
          <h1><b>{{ product.SUBMODELO }}</b></h1> &nbsp;&nbsp;
          <img [src]="'assets/img/lines.png'" alt="" class="line-icon">
        </div>
        <p>{{ product.DESCRIPCION | slice:0:204 }}{{ product.DESCRIPCION!.length > 204 ? '...' : '' }}</p>
        <span class="read-more">Leer más</span>
      </div>
    </div>
  </div>

  <div class="products" *ngIf="typeLine === 'Por Aplicación'">
    <mat-spinner *ngIf="isLoading"></mat-spinner>
    <div class="card" *ngFor="let product of aplicationOptions" [routerLink]="['/aplicacion', product.link]">
      <div class="card-content">
        <img class="cate-img" [src]="product.img" alt="Avatar">
        <div class="title-container">
          <h1><b>{{ product.name }}</b></h1> &nbsp;&nbsp;
          <!-- <img [src]="'assets/img/lines.png'" alt="" class="line-icon"> -->
        </div>
        <!-- <p>{{ product.DESCRIPCION | slice:0:204 }}{{ product.DESCRIPCION!.length > 204 ? '...' : '' }}</p>
        <span class="read-more">Leer más</span> -->
      </div>
    </div>
  </div>

</div>