{% set styling %}
.lightbox-gallery {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.lightbox-gallery .lightbox-gallery__columns {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.lightbox-gallery .lightbox-gallery__column {
  width: 50%;
  padding: 0 10px;
  margin-bottom: 20px;
}

.lightbox-gallery img {
  display: block;
  border-radius: 5px;
  transition: all .2s ease-in-out;
}

.lightbox-gallery img:hover {
  filter: brightness(60%);
  transform: scale(1.05);
}

@media only screen and (min-width: 600px) {
  .lightbox-gallery .lightbox-gallery__column {
    width: calc(100% / 3);
  }
}

@media only screen and (min-width: 1000px) {
  .lightbox-gallery .lightbox-gallery__column {
    width: 25%;
  }
}

.lightbox-gallery .hidden {
  display: none;
}
{% endset %}

{% do assets.addInlineCss(styling) %}

{% block module_content %}
  {% set data = page.header.gallery %}
  {% set thumb_width = data.thumb.width|default(600) %}
  {% set thumb_height = data.thumb.height|default(450) %}

  <div class="lightbox-gallery">
    <div class="lightbox-gallery__columns">
      {% set gallery = md5(page.url) %}
      {% for item in data.items %}
        <div class="lightbox-gallery__column">
          {% set item_image = page.media[item.image] %}
          {% if item.title %}
            {% set title = item.title %}
          {% endif %}
          {% if item.desc %}
            {% set desc = ".desc-" ~ md5(item.desc) %}
          {% endif %}
          {% set content = item_image.cropZoom(thumb_width,thumb_height).html(title, title) %}
          {% set image =  item_image.url %}
          {% include "partials/lightbox.html.twig" %}
        </div>
      {% endfor %}
    </div>
    <div class="hidden">
      {% for item in data.items %}
        {% if item.desc %}
          <div class="glightbox-desc desc-{{ md5(item.desc) }}">
            <p>{{ item.desc|markdown(false) }}</p>
          </div>
        {% endif %}
      {% endfor %}
    </div>
  </div>
{% endblock %}