<div class="brand-section">
  <div class="brand-row" [class.no-bg]="brands.length < 6 ">
    <div class="row row-cols-6 justify-content-center">
      @for(brand of brands; track brand){
      <div>
        <a href="javascript:void(0)" [routerLink]="['/brand', brand.slug]">
          @if(brand.brand_image){
          <img [src]="brand.brand_image.original_url" class="img-fluid" alt />
          }@else {
          <h3>{{ brand.name }}</h3>
          }
        </a>
      </div>
      }
    </div>

    @if(!(brands && brands.length)){
    <app-no-data [class]="'no-data-added bg-light'" [text]="'no_product_found'" />
    }
  </div>
</div>
