{% extends 'base.html.twig' %}

{% block title %}La corde sensible | Galerie {% endblock %}

{% block body %}
    <!-- HEADER -->
    <header data-jarallax data-speed=".8" style="background-image: url({{ asset('img/_gallery_1.jpg') }})">
        <div class="pt-10 pb-8 pt-md-15 pb-md-13 bg-black bg-opacity-50">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-12 col-md-8 col-lg-6 text-center">
                        <!-- Heading -->
                        <h1 class="display-6 fw-bold text-white">Notre Galerie</h1>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- CAROUSEL -->
    <section class="pt-7 pt-md-9">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 col-md-8 col-lg-6 text-center">
                    <!-- Heading -->
                    <h2 class="mb-2">Nos photos</h2>

                    <!-- Subheading -->
                    <p class="mb-6">
                        Asperiores temporibus fuga possimus labore ex porro pariatur sed, nisi dolor, nobis architecto.
                        Placeat facilis voluptas alias ducimus.
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <!-- Carousel -->
                    <div data-flickity='{"wrapAround": true, "imagesLoaded": true}'>
                        <figure class="w-100">
                            <!-- Image -->
                            <img class="img-fluid mb-4" src="{{ asset('img/_gallery_img_1.jpg') }}" alt="..."/>

                            <!-- Caption -->
                            <figcaption class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit 🥰
                            </figcaption>
                        </figure>
                        <figure class="w-100">
                            <!-- Image -->
                            <img class="img-fluid mb-4" src="{{ asset('img/_gallery_img_2.jpg') }}" alt="..."/>

                            <!-- Caption -->
                            <figcaption class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit 🥰
                            </figcaption>
                        </figure>
                        <figure class="w-100">
                            <!-- Image -->
                            <img class="img-fluid mb-4" src="{{ asset('img/_gallery_img_3.jpg') }}" alt="..."/>

                            <!-- Caption -->
                            <figcaption class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit 🥰
                            </figcaption>
                        </figure>
                    </div>
                </div>
            </div>
        </div>
    </section>

{% endblock %}