{{-- SECTION: Modernas y equipadas instalaciones (Galería) --}}
<section class="pt-16 bg-[#F5FBFC]" id="instalaciones-galeria">
    <div class="container mx-auto px-4">
        
        <div class="text-center mb-10">
            <h2 class="text-xl md:text-3xl font-bold text-[#007e7f] mb-2">Modernas y equipadas instalaciones</h2>
            <h3 class="text-xl md:text-2xl font-bold text-[#007e7f]">para una educación integral</h3>
        </div>
    </div>
    {{-- Layout de galería tipo masonry usando Flexbox en columnas --}}
<div class="columns-2 gap-2 md:grid md:grid-cols-3 md:gap-0">

    @foreach ($instalaciones as $item)
        <div 
            class="break-inside-avoid mb-2 md:mb-0"
            data-aos="fade-up"
            data-aos-delay="{{ ($loop->index % 6) * 100 }}"
            data-aos-duration="800"
        >

            <a data-fslightbox="instalaciones"
               href="{{ Storage::url($item->image) }}">

                <!-- MASCARA -->
                <div class="overflow-hidden h-[180px] sm:h-[250px] md:h-[450px]">
                    <img src="{{ Storage::url($item->image) }}"
                         alt="{{ $item->titulo }}"
                         class="w-full h-full object-cover hover:scale-105 transition-transform duration-500">
                </div>

            </a>

        </div>
    @endforeach

</div>
</section>