{{-- resources/views/public/galeri/index.blade.php --}}
<section id="galeri" class="portfolio section">
    <div class="container section-title" data-aos="fade-up">
      <h2>Galeri Kegiatan</h2>
      <p>Dokumentasi aktivitas, prestasi, dan keseharian siswa-siswi di sekolah.</p>
    </div>

    <div class="container">
      <div class="isotope-layout" data-default-filter="*" data-layout="masonry" data-sort="original-order">
        <ul class="portfolio-filters isotope-filters" data-aos="fade-up" data-aos-delay="100">
          <li data-filter="*" class="filter-active">Semua</li>
          <li data-filter=".filter-app">Ekstrakurikuler</li>
          <li data-filter=".filter-product">Prestasi</li>
        </ul>

        <div class="row gy-4 isotope-container" data-aos="fade-up" data-aos-delay="200">
          <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-app">
            <img src="{{ asset('bocor/assets/img/masonry-portfolio/masonry-portfolio-1.jpg') }}" class="img-fluid" alt="">
            <div class="portfolio-info">
              <h4>Pramuka</h4>
              <p>Kegiatan perkemahan</p>
              <a href="{{ asset('bocor/assets/img/masonry-portfolio/masonry-portfolio-1.jpg') }}" title="Pramuka" data-gallery="portfolio-gallery-app" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
            </div>
          </div>
          <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-product">
            <img src="{{ asset('bocor/assets/img/masonry-portfolio/masonry-portfolio-2.jpg') }}" class="img-fluid" alt="">
            <div class="portfolio-info">
              <h4>Juara Olimpiade</h4>
              <p>Penyerahan piala</p>
              <a href="{{ asset('bocor/assets/img/masonry-portfolio/masonry-portfolio-2.jpg') }}" title="Juara Olimpiade" data-gallery="portfolio-gallery-product" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
            </div>
          </div>
          <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-app">
            <img src="{{ asset('bocor/assets/img/masonry-portfolio/masonry-portfolio-3.jpg') }}" class="img-fluid" alt="">
            <div class="portfolio-info">
              <h4>Paskibraka</h4>
              <p>Latihan rutin</p>
              <a href="{{ asset('bocor/assets/img/masonry-portfolio/masonry-portfolio-3.jpg') }}" title="Paskibraka" data-gallery="portfolio-gallery-branding" class="glightbox preview-link"><i class="bi bi-zoom-in"></i></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>