@extends('layouts.master')
@section('custom_css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" integrity="sha512-ZKX+BvQihRJPA8CROKBhDNvoc2aDMOdAlcm7TUQY+35XYtrd3yh95QOOhsPDQY9QnKE0Wqag9y38OIgEvb88cA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        .gallery-item {
            display: block;
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }
        .gallery-item::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background-image: linear-gradient(128deg, rgba(72, 78, 139, 0.947) 8%, rgba(184, 145, 54, 0.84) 76%, transparent);
            z-index: 2;
            visibility: hidden;
            transition: 0.45s ease-in-out;
        }
        .gallery-item:hover::after {
            content: '';
            top: 0;
            left: 0;
            transform: rotate(180deg);
            width: 100%;
            height: 100%;
            visibility: visible;
        }
        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
@endsection


@section('slider')

@endsection


@section('content')
    
    <div id="gallery" class="container">
        <div class="row">
            <div class="col-lg-8 mx-auto">
                <div class="mb-4 text-center">
                    <h2 class="text-center wow fadeInUp" data-wow-delay="0.2s">Gallery</h2>
                </div>
            </div>
        </div>

        <div class="row g-3">
            <div class="col-lg-4 col-6 wow fadeInUp">
                <a href="{{ asset('assets/images/gallery/1.jpeg') }}" data-lightbox="gallery" data-title="My caption" class="gallery-item">
                    <img src="{{ asset('assets/images/gallery/1.jpeg') }}" class="img-fluid" alt="">
                </a>
            </div>
            <div class="col-lg-4 col-6 wow fadeInUp">
                <a href="{{ asset('assets/images/gallery/2.jpeg') }}" data-lightbox="gallery" data-title="My caption" class="gallery-item">
                    <img src="{{ asset('assets/images/gallery/2.jpeg') }}" class="img-fluid" alt="">
                </a>
            </div>
            <div class="col-lg-4 col-6 wow fadeInUp">
                <a href="{{ asset('assets/images/gallery/3.jpeg') }}" data-lightbox="gallery" data-title="My caption" class="gallery-item">
                    <img src="{{ asset('assets/images/gallery/3.jpeg') }}" class="img-fluid" alt="">
                </a>
            </div>
            <div class="col-lg-4 col-6 wow fadeInUp">
                <a href="https://images.unsplash.com/photo-1578575437130-527eed3abbec?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" data-lightbox="gallery" data-title="My caption" class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1578575437130-527eed3abbec?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" class="img-fluid" alt="">
                </a>
            </div>
            <div class="col-lg-4 col-6 wow fadeInUp">
                <a href="https://images.unsplash.com/photo-1590496793907-4d66e2994b4d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1091&q=80" data-lightbox="gallery" data-title="My caption" class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1590496793907-4d66e2994b4d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1091&q=80" class="img-fluid" alt="">
                </a>
            </div>
            
        </div>
    </div>


    @section('custom_js')
        <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js" integrity="sha512-k2GFCTbp9rQU412BStrcD/rlwv1PYec9SNrkbQlo6RZCf75l6KcC3UwDY8H5n5hl4v77IDtIPwOk9Dqjs/mMBQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    @endsection
@endsection