@extends('layouts.default')
@section('content')
<style>
    .ImageGrid {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        margin-right: auto;
        margin-left: auto;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin: 0.5em -4px 1.5em -4px;
    }

    .ImageGrid > a {
        padding: 4px;
        -webkit-box-flex: 1;
        -webkit-flex: 1 0 33.33%;
        -ms-flex: 1 0 33.33%;
        flex: 1 0 33.33%;
    }

    .ImageGrid > a img {
        width: 100%;
        max-height: auto;

    }
</style>
<div class="page-middle-banner">
    <div class="opacity">
        <h3>{{setting('event.event_title')}}</h3>
        <a href="{{setting('event.event_button_link')}}" target="_blank" class="hvr-bounce-to-right">{{setting('event.event_button_title')}}</a>
    </div> <!-- /.opacity -->
</div> <!-- /.page-middle-banner -->

<section id="about-us">
    <div class="container-fluid">
        <div class="theme-title">
            <h2>Gallery</h2>
            <p>
                <div class="ImageGrid">
                    @foreach(\App\Models\PhotoGallery::all()->chunk(3) as $projects)
                            @foreach($projects as $value)
                                <a data-fancybox="gallery" href="{{media($value->image)}}"  title="{{$value->title}}" data-caption="{{$value->title}}">
                                	<img src="{{media($value->thumbnail('360x260'))}}">
                                </a>
                            @endforeach
                    @endforeach
                </div> <!-- /.theme-title -->
            </p>
            </div> <!-- /.theme-title -->

        </div> <!-- /.container -->
</section> <!-- /#about-us -->


@stop