<div class="popular-recipes-box" style="background: url(assets/images/background.jpg);">
  <div class="container"></div>
     <div class="recipes-contain">
        <div class="head-title">
            <h3>Our Industry</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has<br>been the industry's standard dummy text ever since the 1500s,</p>
            <button mat-raised-button color="primary" [routerLink]="['/pages/about']" routerLinkActive="router-link-active" >See more</button>
          </div>
          <section class="gallery">
            <div class="container-fluid">
                        <section class="gallery-section">
                            <figure class="gallery__item gallery__item--1" *ngFor="let bg of blog">
                                <!-- <a (click)="openProductDialog(product, bigProductImageIndex)"  class="tt-gallery-1"> -->
                                  <a   class="tt-gallery-1">
                                    <img [src]="bg.image " alt="Gallery image 1" class="gallery__img">
                                  </a>
                             </figure>
                            <!-- <figure class="gallery__item gallery__item--2">
                                <a class="tt-gallery-1">
                                    <img src="assets/images/galery/gal-2.jpeg" alt="Gallery image 2" class="gallery__img">
                                   
                                  </a>
                                </figure>
                            <figure class="gallery__item gallery__item--3 ">
                                <a class="tt-gallery-1">
                                    <img src="assets/images/galery/gal-3.jpeg" alt="Gallery image 3" class="gallery__img">
                                  </a>
                                </figure>
                          
                            <figure class="gallery__item gallery__item--5">
                                <a class="tt-gallery-1 lightbox">
                                    <img src="assets/images/galery/gal-5.jpeg" alt="Gallery image 5" class="gallery__img">
                                  </a>
                                </figure>
                            <figure class="gallery__item gallery__item--6">
                                <a  class="tt-gallery-1">
                                    <img src="assets/images/galery/gal-6.jpeg" alt="Gallery image 6" class="gallery__img">
                                    </a>
                                  </figure>
                            <figure class="gallery__item gallery__item--7">
                                <a  class="tt-gallery-1 ">
                                    <img src="assets/images/galery/gal-7.jpeg" alt="Gallery image 7" class="gallery__img">
                                    </a>
                            </figure>
                            <figure class="gallery__item gallery__item--8">
                                <a  class="tt-gallery-1 ">
                                    <img src="assets/images/galery/gal-8.jpeg" alt="Gallery image 8" class="gallery__img">
                                    </a>
                                  </figure>
                            <figure class="gallery__item gallery__item--9">
                                <a  class="tt-gallery-1">
                                <img src="assets/images/galery/gal-9.jpeg" alt="Gallery image 9" class="gallery__img">
                                </a>
                              </figure> -->
                            

                        </section>
            </div>
        </section>
     </div>
  
</div>