{% 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">
    <h1 class="funky-font main-header text-center">{{ page.title }}</h1>
</div>
<div class="row g-3">
    {% for i in 1..8 %}
    <div class="col-6 col-md-4 col-lg-3">
        <a href="https://picsum.photos/seed/detail{{ i }}/800/800" class="glightbox gallery-item" data-gallery="detail" data-description="Werk {{ i }}">
            <div class="gallery-thumb"><img src="https://picsum.photos/seed/detail{{ i }}/350/350" loading="lazy" alt="Werk {{ i }}"></div>
        </a>
    </div>
    {% endfor %}
</div>
{% endblock %}