@extends('layouts.layout5')
@php
    $title = 'Gallery Filter';
    $subtitle = 'Our Gallery';
@endphp
@section('title', 'Gallery Filter || Transwide || Professional Transportation & Logistics Laravel Template')
@section('content')

    <section class="gallery-page section-space">
        <div class="container">
            <div class="gallery-page__filter">
                <ul class="list-unstyled post-filter gallery-page__filter__list">
                    <li class="transwide-btn active" data-filter=".filter-item">
                        <span class="transwide-btn__text transwide-btn__text--1">All</span>
                        <span class="transwide-btn__text transwide-btn__text--2">All</span>
                    </li>
                    <li class="transwide-btn" data-filter=".warehouse ">
                        <span class="transwide-btn__text transwide-btn__text--1">Warehouse</span>
                        <span class="transwide-btn__text transwide-btn__text--2">Warehouse</span>
                    </li>
                    <li class="transwide-btn" data-filter=".sea-freight">
                        <span class="transwide-btn__text transwide-btn__text--1">Sea Freight</span>
                        <span class="transwide-btn__text transwide-btn__text--2">Sea Freight</span>
                    </li>
                    <li class="transwide-btn" data-filter=".port-operations">
                        <span class="transwide-btn__text transwide-btn__text--1">Port Operations</span>
                        <span class="transwide-btn__text transwide-btn__text--2">Port Operations</span>
                    </li>
                    <li class="transwide-btn" data-filter=".logistic">
                        <span class="transwide-btn__text transwide-btn__text--1">Logistic</span>
                        <span class="transwide-btn__text transwide-btn__text--2">Logistic</span>
                    </li>
                </ul><!-- /.list-unstyledf -->
            </div><!-- /.gallery-page__filter -->
            <div class="row gutter-y-30 filter-layout">
                <div class="col-xl-4 col-md-6 filter-item warehouse">
                    <div class="gallery-page__card">
                        <img src="{{ asset("/assets/images/gallery/gallery-1-1.jpg") }}" alt="gallery">
                        <div class="gallery-page__card__hover">
                            <a href="{{ url("assets/images/gallery/gallery-1-1.jpg") }}" class="img-popup">
                                <span class="gallery-page__card__icon"></span>
                            </a>
                        </div><!-- /.gallery-page__card__hover -->
                    </div><!-- /.gallery-page__card -->
                </div><!-- /.col-xl-4 col-md-6 -->
                <div class="col-xl-4 col-md-6 filter-item sea-freight">
                    <div class="gallery-page__card">
                        <img src="{{ asset("/assets/images/gallery/gallery-1-2.jpg") }}" alt="gallery">
                        <div class="gallery-page__card__hover">
                            <a href="{{ url("assets/images/gallery/gallery-1-2.jpg") }}" class="img-popup">
                                <span class="gallery-page__card__icon"></span>
                            </a>
                        </div><!-- /.gallery-page__card__hover -->
                    </div><!-- /.gallery-page__card -->
                </div><!-- /.col-xl-4 col-md-6 -->
                <div class="col-xl-4 col-md-6 filter-item port-operations">
                    <div class="gallery-page__card">
                        <img src="{{ asset("/assets/images/gallery/gallery-1-3.jpg") }}" alt="gallery">
                        <div class="gallery-page__card__hover">
                            <a href="{{ url("assets/images/gallery/gallery-1-3.jpg") }}" class="img-popup">
                                <span class="gallery-page__card__icon"></span>
                            </a>
                        </div><!-- /.gallery-page__card__hover -->
                    </div><!-- /.gallery-page__card -->
                </div><!-- /.col-xl-4 col-md-6 -->
                <div class="col-xl-4 col-md-6 filter-item logistic">
                    <div class="gallery-page__card">
                        <img src="{{ asset("/assets/images/gallery/gallery-1-4.jpg") }}" alt="gallery">
                        <div class="gallery-page__card__hover">
                            <a href="{{ url("assets/images/gallery/gallery-1-4.jpg") }}" class="img-popup">
                                <span class="gallery-page__card__icon"></span>
                            </a>
                        </div><!-- /.gallery-page__card__hover -->
                    </div><!-- /.gallery-page__card -->
                </div><!-- /.col-xl-4 col-md-6 -->
                <div class="col-xl-4 col-md-6 filter-item sea-freight">
                    <div class="gallery-page__card">
                        <img src="{{ asset("/assets/images/gallery/gallery-1-5.jpg") }}" alt="gallery">
                        <div class="gallery-page__card__hover">
                            <a href="{{ url("assets/images/gallery/gallery-1-5.jpg") }}" class="img-popup">
                                <span class="gallery-page__card__icon"></span>
                            </a>
                        </div><!-- /.gallery-page__card__hover -->
                    </div><!-- /.gallery-page__card -->
                </div><!-- /.col-xl-4 col-md-6 -->
                <div class="col-xl-4 col-md-6 filter-item sea-freight">
                    <div class="gallery-page__card">
                        <img src="{{ asset("/assets/images/gallery/gallery-1-6.jpg") }}" alt="gallery">
                        <div class="gallery-page__card__hover">
                            <a href="{{ url("assets/images/gallery/gallery-1-6.jpg") }}" class="img-popup">
                                <span class="gallery-page__card__icon"></span>
                            </a>
                        </div><!-- /.gallery-page__card__hover -->
                    </div><!-- /.gallery-page__card -->
                </div><!-- /.col-xl-4 col-md-6 -->
                <div class="col-xl-8 col-md-6 filter-item sea-freight">
                    <div class="gallery-page__card">
                        <img src="{{ asset("/assets/images/gallery/gallery-1-7.jpg") }}" alt="gallery">
                        <div class="gallery-page__card__hover">
                            <a href="{{ url("assets/images/gallery/gallery-1-7.jpg") }}" class="img-popup">
                                <span class="gallery-page__card__icon"></span>
                            </a>
                        </div><!-- /.gallery-page__card__hover -->
                    </div><!-- /.gallery-page__card -->
                </div><!-- /.col-xl-8 col-md-6 -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </section><!-- /.gallery-page section-space -->

    <x-footer />
    <x-mobileMenu />
    <x-searchPopup />
    <x-scroll-to-top />
@endsection