@extends('welcome.welcome-layout')

@section('style')
<style>
    .banner-gallery {
        background-color: rgba(245, 248, 251, 1);
        width: 100%;
        height: 30vh;
    }

    .banner-content-about h2 {
        color: rgba(34, 42, 46, 1);
    }
</style>
@endsection

@section('content')
<section class="banner-gallery d-flex align-items-center justify-content-center mb-5">
    <div class="container">
        <div class="row banner-content-about">
            <div class="col-md-12 text-center">
                <h2 class="text-uppercase fw-bold">EXPLORE GALLERY</h2>
            </div>
        </div>
    </div>
</section>
<section class="gallery mb-5">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xl-4 col-lg-6 col-md-6 col-sm-6 mb-4">
                <div class="gallery-content">
                    <img src="{{ asset('images/welcome-images/g-1.jpg') }}" alt="Group Tour" class="gallery-img mb-3" width="100%" height="100%">
                    <h5 class="fw-normal">Group tour of Hill Garden</h5>
                </div>
            </div>
            <div class="col-xl-4 col-lg-6 col-md-6 col-sm-6 mb-4">
                <div class="gallery-content">
                    <img src="{{ asset('images/welcome-images/g2.jpg') }}" alt="Group Tour" class="gallery-img mb-3" width="100%" height="100%">
                    <h5 class="fw-normal">Group tour of Hill Garden</h5>
                </div>
            </div>
            <div class="col-xl-4 col-lg-6 col-md-6 col-sm-6 mb-4">
                <div class="gallery-content">
                    <img src="{{ asset('images/welcome-images/g3.jpg') }}" alt="Group Tour" class="gallery-img mb-3" width="100%" height="100%">
                    <h5 class="fw-normal">Play with Clay</h5>
                </div>
            </div>
            <div class="col-xl-4 col-lg-6 col-md-6 col-sm-6 mb-4">
                <div class="gallery-content">
                    <img src="{{ asset('images/welcome-images/g4.jpg') }}" alt="Group Tour" class="gallery-img mb-3" width="100%" height="100%">
                    <h5 class="fw-normal">Group tour of Hill Garden</h5>
                </div>
            </div>
            <div class="col-xl-8 col-lg-12 col-md-12 col-sm-12 mb-4">
                <div class="gallery-content">
                    <img src="{{ asset('images/welcome-images/g5.jpg') }}" alt="Group Tour" class="gallery-img mb-3" width="100%" height="100%">
                    <h5 class="fw-normal">Group tour of Hill Garden</h5>
                </div>
            </div>
             <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 mb-4">
                <div class="gallery-content below-imgs">
                    <img src="{{ asset('images/welcome-images/g6.jpg') }}" alt="Group Tour" class="gallery-img mb-3" width="100%" height="100%">
                    <h5 class="fw-normal">Group tour of Hill Garden</h5>
                </div>
            </div>
            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 mb-4">
                <div class="gallery-content below-imgs">
                    <img src="{{ asset('images/welcome-images/g7.jpg') }}" alt="Group Tour" class="gallery-img mb-3" width="100%" height="100%">
                    <h5 class="fw-normal">Group tour of Hill Garden</h5>
                </div>
            </div>
            <div class="col-xl-3 col-lg-6 col-md-6  col-sm-6 mb-4">
                <div class="gallery-content below-imgs">
                    <img src="{{ asset('images/welcome-images/g8.jpg') }}" alt="Group Tour" class="gallery-img mb-3" width="100%" height="100%">
                    <h5 class="fw-normal">Play with Clay</h5>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection