{% extends 'partials/base.html.twig' %}
{% block extra_css %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css">
{% endblock %}
{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js" defer></script>
{% endblock %}
{% block content %}
<div class="row mb-3">
    <div class="col-12 col-lg-8 offset-lg-2">
        <h1 class="funky-font main-header text-center">{{ page.title }}</h1>
        {{ content|raw }}
    </div>
</div>
<div class="row g-3">
    {% for name, img in page.media.images %}
    <div class="col-6 col-md-4 col-lg-3">
        <a href="{{ img.url }}" class="glightbox gallery-item" data-gallery="{{ page.slug }}">
            <div class="gallery-thumb">
                <img src="{{ img.url }}" loading="lazy" alt="{{ page.title }}">
            </div>
        </a>
    </div>
    {% endfor %}
</div>
{% endblock %}