@extends('frontend.template.main')
@section('content')
@include('frontend.share._ministry_slide')

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.1/baguetteBox.min.css">

<div class="tz-gallery">

    <div class="row">
        <div class="col-sm-6 col-md-3">
            <a class="lightbox" href="../frontend/images/poster/home-angkor.jpg">
                <img src="../frontend/images/poster/home-angkor.jpg">
            </a>
        </div>
        <div class="col-sm-6 col-md-3">
            <a class="lightbox" href="../frontend/images/poster/royal-palace.jpg">
                <img src="../frontend/images/poster/royal-palace.jpg">
            </a>
        </div>        
        <div class="col-sm-12 col-md-3">
            <a class="lightbox" href="../frontend/images/poster/phnom-penh.jpg">
                <img src="../frontend/images/poster/phnom-penh.jpg">
            </a>
        </div>
        <div class="col-sm-12 col-md-3">
            <a class="lightbox" href="../frontend/images/poster/bousra-eco-park.jpg">
                <img src="../frontend/images/poster/bousra-eco-park.jpg">
            </a>
        </div>

    </div>
    <div class="row">
    <div class="col-sm-6 col-md-3">
            <a class="lightbox" href="../frontend/images/poster/dara-sakor-resort.jpg">
                <img src="../frontend/images/poster/dara-sakor-resort.jpg">
            </a>
        </div>
        <div class="col-sm-6 col-md-3">
            <a class="lightbox" href="../frontend/images/poster/koh-ker.jpg">
                <img src="../frontend/images/poster/koh-ker.jpg">
            </a>
        </div>

        <div class="col-sm-12 col-md-3">
            <a class="lightbox" href="../frontend/images/poster/poster-angkor-wat.jpg">
                <img src="../frontend/images/poster/poster-angkor-wat.jpg">
            </a>
        </div>
        <div class="col-sm-6 col-md-3">
            <a class="lightbox" href="../frontend/images/poster/preah-vihear.jpg">
                <img src="../frontend/images/poster/preah-vihear.jpg">
            </a>
        </div>

    </div>
    <div class="row">
    
    <div class="col-sm-12 col-md-3">
            <a class="lightbox" href="../frontend/images/poster/wat-sampov-pram.jpg">
                <img src="../frontend/images/poster/wat-sampov-pram.jpg">
            </a>
        </div>
    <div class="col-sm-12 col-md-3">
            <a class="lightbox" href="../frontend/images/poster/national-museum.jpg">
                <img src="../frontend/images/poster/national-museum.jpg">
            </a>
        </div>
        <div class="col-sm-12 col-md-3">
            <a class="lightbox" href="../frontend/images/poster/win-win-monument.jpg">
                <img src="../frontend/images/poster/win-win-monument.jpg">
            </a>
        </div>
        <div class="col-sm-12 col-md-3">
            <a class="lightbox" href="../frontend/images/poster/apsara-dance.jpg">
                <img src="../frontend/images/poster/apsara-dance.jpg">
            </a>
        </div>
        <div class="col-sm-12 col-md-3">
            <a class="lightbox" href="../frontend/images/poster/bayon-temple.jpg">
                <img src="../frontend/images/poster/bayon-temple.jpg">
            </a>
        </div>
    </div>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.1/baguetteBox.min.js"></script>
<script>
    baguetteBox.run('.tz-gallery');
</script>

<style>
    .gallery-container p.page-description {
        text-align: center;
        margin: 25px auto;
        font-size: 18px;
        color: #999;
    }

    .tz-gallery {
        padding: 2px;
    }

    /* Override bootstrap column paddings */
    .tz-gallery .row>div {
        padding: 2px;
    }

    .tz-gallery .lightbox img {
        width: 100%;
        border-radius: 0;
        position: relative;
    }

    .tz-gallery .lightbox:before {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -13px;

        opacity: 0;
        color: #fff;
        font-size: 26px;
        font-family: 'Glyphicons Halflings';
        content: '\e003';
        pointer-events: none;
        z-index: 9000;
        transition: 0.4s;
    }


    .tz-gallery .lightbox:after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        background-color: rgba(46, 132, 206, 0.7);
        content: '';
        transition: 0.4s;
    }

    .tz-gallery .lightbox:hover:after,
    .tz-gallery .lightbox:hover:before {
        opacity: 1;
    }

    .baguetteBox-button {
        background-color: transparent !important;
    }

    @media(max-width: 768px) {
        body {
            padding: 0;
        }
    }
</style>
@endsection