{{! Image Block - Multi-variant template }}
{{! Handles: hero, full, text-aside, text-overlay }}

{{#if_eq variant "full"}}
{{! === FULL WIDTH IMAGE === }}
<div class="block-image block-image--full block-image--flag-dimensions
           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="scroll-animation scroll-animation--in"
       style="--scroll-animation-step: 0s; --scroll-animation-duration: 1s; --scroll-animation-from: translateY(0);">
    <div class="block-image__figure">
      <div class="block-image__image" style="background-image: url('{{src}}');">
        <img alt="{{alt}}" src="{{src}}"
             {{#if width}}width="{{width}}"{{/if}}
             {{#if height}}height="{{height}}"{{/if}}
             decoding="async" loading="lazy">
        <div class="block-image__overlay" style="opacity: 0.5; background-color: rgb(0, 0, 0);"></div>
      </div>
    </div>
  </div>
</div>

{{else if_eq variant "text aside"}}
{{! === IMAGE WITH TEXT ASIDE === }}
<div class="block-image block-image--text-aside 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-image__container">
    <div class="block-image__row">
      <div class="block-image__col">
        <div class="scroll-animation scroll-animation--in"
             style="--scroll-animation-step: 0s; --scroll-animation-duration: 1s; --scroll-animation-from: translateX(-50px);">
          <div class="block-image__figure">
            <div class="block-image__image">
              <div class="img">
                <div data-rmiz="">
                  <div data-rmiz-content="found" style="visibility: visible;">
                    <img alt="{{alt}}" class="img-img img-img--center" src="{{src}}"
                         {{#if width}}width="{{width}}"{{/if}}
                         {{#if height}}height="{{height}}"{{/if}}
                         decoding="async" loading="lazy">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="block-image__col">
        <div class="block-image__text brand--linkColor">
          <div class="fr-view rise-tiptap">
            {{{text_content}}}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

{{else if_eq variant "text overlay"}}
{{! === IMAGE WITH TEXT OVERLAY === }}
<div class="block-image block-image--overlay block-image--flag-dimensions
           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-image__figure">
    <div class="block-image__image" style="background-image: url('{{src}}');">
      <img alt="{{alt}}" src="{{src}}"
           {{#if width}}width="{{width}}"{{/if}}
           {{#if height}}height="{{height}}"{{/if}}
           decoding="async" loading="lazy">
      <div class="block-image__overlay" style="opacity: 0.5; background-color: rgb(0, 0, 0);"></div>
    </div>
    <div class="block-image__container">
      <div class="block-image__row">
        <div class="block-image__col">
          <div class="scroll-animation scroll-animation--in"
               style="--scroll-animation-step: 0s; --scroll-animation-duration: 1s; --scroll-animation-from: translateY(25px);">
            <div class="block-image__paragraph brand--linkColor">
              <div class="fr-view rise-tiptap">
                {{{text_content}}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

{{else}}
{{! === HERO IMAGE (default) === }}
<div class="block-image block-image--hero block-image--flag-dimensions
           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-image__container">
    <div class="block-image__row">
      <div class="block-image__col">
        <div class="scroll-animation"
             style="--scroll-animation-step: 0s; --scroll-animation-duration: 1s; --scroll-animation-from: translateY(0);">
          <div class="block-image__figure">
            <div class="block-image__image">
              <div class="img">
                <div data-rmiz="">
                  <div data-rmiz-content="found" style="visibility: visible;">
                    <img alt="{{alt}}" class="img-img img-img--center" src="{{src}}"
                         {{#if width}}width="{{width}}"{{/if}}
                         {{#if height}}height="{{height}}"{{/if}}
                         loading="lazy" decoding="async"/>
                  </div>
                  <div data-rmiz-ghost="">
                    <button aria-label="Zoom image" data-rmiz-btn-zoom="" type="button">
                      <span>
                        <svg aria-hidden="true" class="svg-inline--fa" data-icon="arrow-up-right-and-arrow-down-left-from-center"
                             data-prefix="fal" focusable="false" role="img" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
                          <path 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"
                                fill="currentColor"></path>
                        </svg>
                      </span>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{{/if_eq}}