@extends('main')
@section('content')
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css'>
    <style>
        $color-white: #ffffff;
        $color-black: #252a32;
        $color-light: #f1f5f8;
        $color-red: #d32f2f;
        $color-blue: #148cb8;

        $box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.24);

        *,
        *::before,
        *::after {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            list-style: none;
            list-style-type: none;
            text-decoration: none;
            -moz-osx-font-smoothing: grayscale;
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
        }

        

        .main {
            .container {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                grid-gap: 1rem;
                justify-content: center;
                align-items: center;
            }

            .card {
                color: $color-black;
                border-radius: 2px;
                background: $color-white;
                box-shadow: $box-shadow;

                &-image {
                    position: relative;
                    display: block;
                    width: 100%;
                    padding-top: 70%;
                    background: $color-white;

                    img {
                        display: block;
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
            }
        }

        @media only screen and (max-width: 600px) {
            .main {
                .container {
                    display: grid;
                    grid-template-columns: 1fr;
                    grid-gap: 1rem;
                }
            }
        }
        .card-image img {
            height: 394px;
            width: 100%;
        }
    </style>
    <!-- breadcrumb-area -->
    <section class="breadcrumb-area d-flex align-items-center"
        style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url({{ asset('frontend/bg/towel.jpg') }});">
        <div class="container">
        
            <div class="row">
                <div class="col-xl-6 offset-xl-3 col-lg-8 offset-lg-2">
                    <div class="breadcrumb-wrap text-center">
                        <div class="breadcrumb-title mb-30">
                            <h2>Towel</h2>
                        </div>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Towel</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- breadcrumb-area-end -->
    <section id="blog" class="blog-area p-relative pt-45 pb-40 fix">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-10 col-lg-11">
                    <div class="section-title text-center mb-20">
                        <h2>Our Towel Section</h2>
                        <br>
                        <br>
                        <p>We made Towels white, dyed, yarn dyed and bath robs as well.</p>
                        <br><br>
                    </div>
                </div>
            </div>
            <main class="main">
                <div class="container">
                    <div class="card">
                        <div class="card-image">
                            <a href="{{ asset('frontend/rj-img/towel/1.jpg') }}" data-fancybox="gallery"
                                data-caption="Caption Images 1">
                                <img src="{{ asset('frontend/rj-img/towel/1.jpg') }}" alt="Image Gallery">
                            </a>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-image">
                            <a href="{{ asset('frontend/rj-img/towel/2.jpg') }}" data-fancybox="gallery"
                                data-caption="Caption Images 1">
                                <img src="{{ asset('frontend/rj-img/towel/2.jpg') }}" alt="Image Gallery">
                                
                            </a>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-image">
                            <a href="{{ asset('frontend/rj-img/towel/3.png') }}" data-fancybox="gallery"
                                data-caption="Caption Images 1">
                                <img src="{{ asset('frontend/rj-img/towel/3.png') }}" alt="Image Gallery">
                            
                            </a>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-image">
                            <a href="{{ asset('frontend/rj-img/towel/4.jpg') }}" data-fancybox="gallery"
                                data-caption="Caption Images 1">
                                <img src="{{ asset('frontend/rj-img/towel/4.jpg') }}" alt="Image Gallery">
                                
                            </a>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-image">
                            <a href="{{ asset('frontend/rj-img/towel/5.jpg') }}" data-fancybox="gallery"
                                data-caption="Caption Images 1">
                                <img src="{{ asset('frontend/rj-img/towel/5.jpg') }}" alt="Image Gallery">
                                
                            </a>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-image">
                            <a href="{{ asset('frontend/rj-img/towel/6.jpg') }}" data-fancybox="gallery"
                                data-caption="Caption Images 1">
                                <img src="{{ asset('frontend/rj-img/towel/6.jpg') }}" alt="Image Gallery">
                                
                            </a>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-image">
                            <a href="{{ asset('frontend/rj-img/towel/7.jpg') }}" data-fancybox="gallery"
                                data-caption="Caption Images 1">
                                <img src="{{ asset('frontend/rj-img/towel/7.jpg') }}" alt="Image Gallery">
                                
                            </a>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-image">
                            <a href="{{ asset('frontend/rj-img/towel/8.jpg') }}" data-fancybox="gallery"
                                data-caption="Caption Images 1">
                                <img src="{{ asset('frontend/rj-img/towel/8.jpg') }}" alt="Image Gallery">
                                
                            </a>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-image">
                            <a href="{{ asset('frontend/rj-img/towel/9.jpg') }}" data-fancybox="gallery"
                                data-caption="Caption Images 1">
                                <img src="{{ asset('frontend/rj-img/towel/9.jpg') }}" alt="Image Gallery">
                                
                            </a>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-image">
                            <a href="{{ asset('frontend/rj-img/towel/10.png') }}" data-fancybox="gallery"
                                data-caption="Caption Images 1">
                                <img src="{{ asset('frontend/rj-img/towel/10.png') }}" alt="Image Gallery">
                                
                            </a>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-image">
                            <a href="{{ asset('frontend/rj-img/towel/11.jpg') }}" data-fancybox="gallery"
                                data-caption="Caption Images 1">
                                <img src="{{ asset('frontend/rj-img/towel/11.jpg') }}" alt="Image Gallery">
                                
                            </a>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-image">
                            <a href="{{ asset('frontend/rj-img/towel/12.jpg') }}" data-fancybox="gallery"
                                data-caption="Caption Images 1">
                                <img src="{{ asset('frontend/rj-img/towel/12.jpg') }}" alt="Image Gallery">
                                
                            </a>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-image">
                            <a href="{{ asset('frontend/rj-img/towel/13.jpg') }}" data-fancybox="gallery"
                                data-caption="Caption Images 1">
                                <img src="{{ asset('frontend/rj-img/towel/13.jpg') }}" alt="Image Gallery">
                                
                            </a>
                        </div>
                    </div>
                    
                    
                </div>
            </main>
        </div>
    </section>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js'></script>
    <script src="./script.js"></script>

    <script>
        // Fancybox Configuration
        $('[data-fancybox="gallery"]').fancybox({
            buttons: [
                "slideShow",
                "thumbs",
                "zoom",
                "fullScreen",
                "share",
                "close"
            ],
            loop: false,
            protect: true
        });
    </script>
@endsection