{{! Gallery Block - Multi-column image grid }}
{{! Handles: twocol, threecol, fourcol, centered }}

<div class="block-gallery block-gallery--{{variant}} block-wrapper bg bg--range-light bg--type-light"
     style="--color-background: #ffffff;
            box-shadow: rgb(255, 255, 255) 0px 1px 0px;
            padding-bottom: 3rem;
            padding-top: 3rem;
            --color-background-contrast: #000;
            --color-background-contrast-complementary: #fff;
            --color-background-contrast-rgb: 0,0,0;">
  <span></span>
  <div class="block-gallery__container">
    <div class="block-gallery__row">
      {{#each images}}
      <div class="scroll-animation scroll-animation--in"
           style="--scroll-animation-step: {{multiply @index 0.25}}s;
                  --scroll-animation-duration: 1s;
                  --scroll-animation-from: translateY(0);">
        <div class="block-gallery__col" style="--idx: {{@index}};">
          <div class="block-gallery__figure">
            <div class="block-gallery__image">
              <div class="img">
                <div data-rmiz="">
                  <div data-rmiz-content="found" style="visibility: visible;">
                    <img alt="{{this.alt}}"
                         class="img-img img-img--center"
                         src="{{this.src}}"
                         {{#if this.width}}width="{{this.width}}"{{/if}}
                         {{#if this.height}}height="{{this.height}}"{{/if}}
                         decoding="async"
                         loading="lazy">
                  </div>
                  <div data-rmiz-ghost="">
                    <button aria-label="Zoom image" data-rmiz-btn-zoom="" type="button">
                      <span>
                        <svg aria-hidden="true" focusable="false" data-prefix="fal"
                             data-icon="arrow-up-right-and-arrow-down-left-from-center"
                             class="svg-inline--fa fa-arrow-up-right-and-arrow-down-left-from-center"
                             role="img" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
                          <path fill="currentColor" d="M292.7 196.7c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L480 54.6 480 160c0 8.8 7.2 16 16 16s16-7.2 16-16l0-144c0-8.8-7.2-16-16-16L352 0c-8.8 0-16 7.2-16 16s7.2 16 16 16l105.4 0L292.7 196.7zM219.3 315.3c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L32 457.4 32 352c0-8.8-7.2-16-16-16s-16 7.2-16 16L0 496c0 8.8 7.2 16 16 16l144 0c8.8 0 16-7.2 16-16s-7.2-16-16-16L54.6 480 219.3 315.3z"></path>
                        </svg>
                      </span>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      {{/each}}
    </div>
  </div>
</div>