{% load ev_tags %}
{% if gallery %}
<section class="section section--gallery" id="gallery">
  <div class="wrap">
    <header class="sec-head sec-head--row">
      <div>
        <span class="eyebrow">Gallery</span>
        <h2 class="sec-title">See It. <em class="t-green">Ride It.</em></h2>
      </div>
      <div class="carousel-ctrl">
        <button type="button" class="round-btn" data-car-prev aria-label="Previous">{% icon "chev-l" 20 %}</button>
        <button type="button" class="round-btn" data-car-next aria-label="Next">{% icon "chev-r" 20 %}</button>
      </div>
    </header>
    <div class="carousel" data-carousel tabindex="0" aria-label="Gallery images">
      {% for g in gallery %}
      <figure class="gal">
        <button type="button" class="gal__btn" data-lightbox="{{ g.image.url }}" data-caption="{{ g.title }}">
          <img src="{{ g.image.url }}" alt="{{ g.title }}" loading="lazy">
        </button>
        <figcaption><span class="badge badge--soft">{{ g.get_category_display }}</span>{{ g.title }}</figcaption>
      </figure>
      {% endfor %}
    </div>
  </div>
</section>
<div class="lightbox" data-lightbox-box hidden>
  <button type="button" class="lightbox__x" data-lightbox-close aria-label="Close">{% icon "x" 26 %}</button>
  <img alt=""><p></p>
</div>
{% endif %}