Gallery

<div class="gallery grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 mb-5" data-controller="lightbox">
  <button data-action="lightbox#open" data-caption="" title="" class="gallery__item js-lightbox-trigger" style="background-image: url(https://materials.raute.com/file/dl/c=system_640x/fRHUPg/A9pIB06JLk6K6z4uv0D5Yw/face-veneer2.jpg);">
    <div style="display: none;" class="js-lightbox-content">
      <img src="https://materials.raute.com/file/dl/c=system_x1080/fRHUPg/A9pIB06JLk6K6z4uv0D5Yw/face-veneer2.jpg" alt="">
    </div>
  </button>
  <button data-action="lightbox#open" data-caption="" title="" class="gallery__item js-lightbox-trigger" style="background-image: url(https://materials.raute.com/file/dl/c=system_640x/rbJuAA/ZReExbMXjtOcSI45-CEXvQ/shutterstock_280598159.jpg);">
    <div style="display: none;" class="js-lightbox-content">
      <img src="https://materials.raute.com/file/dl/c=system_x1080/rbJuAA/ZReExbMXjtOcSI45-CEXvQ/shutterstock_280598159.jpg" alt="">
    </div>
  </button>
  <button data-action="lightbox#open" data-caption="" title="" class="gallery__item js-lightbox-trigger" style="background-image: url(https://materials.raute.com/file/dl/c=system_640x/eXtsag/YhtobCZVlcoSDtDO9P6ChQ/veneer-fuitbox.jpg);">
    <div style="display: none;" class="js-lightbox-content">
      <img src="https://materials.raute.com/file/dl/c=system_x1080/eXtsag/YhtobCZVlcoSDtDO9P6ChQ/veneer-fuitbox.jpg" alt="">
    </div>
  </button>
  <button data-action="lightbox#open" data-caption="" title="" class="gallery__item js-lightbox-trigger" style="background-image: url(https://materials.raute.com/file/dl/c=system_640x/zjBixQ/nIN2o-1J53J84MdR9ZCCDQ/veneer-sheets.jpg);">
    <div style="display: none;" class="js-lightbox-content">
      <img src="https://materials.raute.com/file/dl/c=system_x1080/zjBixQ/nIN2o-1J53J84MdR9ZCCDQ/veneer-sheets.jpg" alt="">
    </div>
  </button>
  <template data-target="lightbox.template">
    <div class="lightbox">
      <button class="lightbox__close js-lightbox-close">
        <i class="icon icon--close "><svg xmlns="http://www.w3.org/2000/svg" role="presentation"> <use href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-close"></use></svg></i>
      </button>
      <div class="lightbox__content">
        {{{ content }}}
        <p class="lightbox__content-caption">
          {{ caption }}
        </p>
        {{# prev }}
          <button class="lightbox__prev js-lightbox-prev">
            <i class="icon icon--chevron-right "><svg xmlns="http://www.w3.org/2000/svg" role="presentation"> <use xlink:href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-chevron-right" href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-chevron-right"></use> </svg></i>
          </button>
        {{/ prev }}
        {{# next }}
          <button class="lightbox__next js-lightbox-next">
            <i class="icon icon--chevron-right "><svg xmlns="http://www.w3.org/2000/svg" role="presentation"> <use xlink:href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-chevron-right" href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-chevron-right"></use> </svg></i>
          </button>
        {{/ next }}
      </div>
    </div>
  </template>
</div>

<div class="gallery grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 mb-5" data-controller="lightbox">
  <button data-action="lightbox#open" data-caption="Veneer Peeling Line R3" title="" class="gallery__item is-video js-lightbox-trigger" style="background-image: url(https://materials.raute.com/file/dl/c=system_640x/bPOh4g/Lksm7ev6Ki0HHTX-65fPRA/veneer-peeling-line-R3-product-video-en.jpg);">
    <i class="icon icon--play ">
      <svg xmlns="http://www.w3.org/2000/svg" role="presentation">
        <use xlink:href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-play" href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-play"></use>
      </svg>
    </i>
    <div style="display: none;" class="js-lightbox-content">
      <video controls="">
        <source src="https://materials.raute.com/file/dl/i/bPOh4g/Lksm7ev6Ki0HHTX-65fPRA/veneer-peeling-line-R3-product-video-en.mp4" type="">
      </video>
    </div>
  </button>
  <button data-action="lightbox#open" data-caption="Veneer Drying Line R3" title="" class="gallery__item is-video js-lightbox-trigger" style="background-image: url(https://materials.raute.com/file/dl/c=system_640x/rYXvbw/pEsFapwA-TkZCAOOfuXeaQ/Raute-Veneer-Drying-Line-R3-Features-en.jpg);">
    <i class="icon icon--play ">
      <svg xmlns="http://www.w3.org/2000/svg" role="presentation">
        <use xlink:href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-play" href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-play"></use>
      </svg>
    </i>
    <div style="display: none;" class="js-lightbox-content">
      <video controls="">
        <source src="https://materials.raute.com/file/dl/i/rYXvbw/pEsFapwA-TkZCAOOfuXeaQ/Raute-Veneer-Drying-Line-R3-Features-en.mp4" type="">
      </video>
    </div>
  </button>
  <button data-action="lightbox#open" data-caption="Veneer Patcher R3" title="" class="gallery__item is-video js-lightbox-trigger" style="background-image: url(https://materials.raute.com/file/dl/c=system_640x/aTOSZA/k31MuLDknvXkCpviU6np1w/veneer-patcher-R3-product-video.jpg);">
    <i class="icon icon--play ">
      <svg xmlns="http://www.w3.org/2000/svg" role="presentation">
        <use xlink:href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-play" href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-play"></use>
      </svg>
    </i>
    <div style="display: none;" class="js-lightbox-content">
      <video controls="">
        <source src="https://materials.raute.com/file/dl/i/aTOSZA/k31MuLDknvXkCpviU6np1w/veneer-patcher-R3-product-video.mp4" type="">
      </video>
    </div>
  </button>
  <button data-action="lightbox#open" data-caption="Plywood Lay-up Line R3" title="" class="gallery__item is-video js-lightbox-trigger" style="background-image: url(https://materials.raute.com/file/dl/c=system_640x/oXV3dA/lQ8TNB8ujBwucrZCtoQIOg/Raute-Plywood-Layup-Line-R3-Features-en.jpg);">
    <i class="icon icon--play ">
      <svg xmlns="http://www.w3.org/2000/svg" role="presentation">
        <use xlink:href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-play" href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-play"></use>
      </svg>
    </i>
    <div style="display: none;" class="js-lightbox-content">
      <video controls="">
        <source src="https://materials.raute.com/file/dl/i/oXV3dA/lQ8TNB8ujBwucrZCtoQIOg/Raute-Plywood-Layup-Line-R3-Features-en.mp4" type="">
      </video>
    </div>
  </button>
  <button data-action="lightbox#open" data-caption="Veneer Peeling Line R3" title="" class="gallery__item js-lightbox-trigger" style="background-image: url(https://materials.raute.com/file/dl/c=system_640x/D1xI_w/a9MvWwO1YB9wNaJc1R4daA/veneer-peeling-line-R3.jpg);">
    <div style="display: none;" class="js-lightbox-content">
      <img src="https://materials.raute.com/file/dl/c=system_x1080/D1xI_w/a9MvWwO1YB9wNaJc1R4daA/veneer-peeling-line-R3.jpg" alt="">
    </div>
  </button>
  <button data-action="lightbox#open" data-caption="Veneer Peeling Line R3 enables efficient veneer peeling from small diameter blocks, starting from 80 mm" title="" class="gallery__item js-lightbox-trigger" style="background-image: url(https://materials.raute.com/file/dl/c=system_640x/AQAhbg/LD1Y7LMMAOmakqZpGtpYxA/peeled-core1.jpg);">
    <div style="display: none;" class="js-lightbox-content">
      <img src="https://materials.raute.com/file/dl/c=system_x1080/AQAhbg/LD1Y7LMMAOmakqZpGtpYxA/peeled-core1.jpg" alt="">
    </div>
  </button>
  <button data-action="lightbox#open" data-caption="Optimal Peeling Geometry (OPG) enables peeling high-quality veneer with good capacity and an unmatched thickness tolerance compared to conventional spindleless lathes. " title="" class="gallery__item js-lightbox-trigger" style="background-image: url(https://materials.raute.com/file/dl/c=system_640x/bpUnNQ/jrPxcJF6NbPd9jss2V6-lg/veneer-lathe-R3.jpg);">
    <div style="display: none;" class="js-lightbox-content">
      <img src="https://materials.raute.com/file/dl/c=system_x1080/bpUnNQ/jrPxcJF6NbPd9jss2V6-lg/veneer-lathe-R3.jpg" alt="">
    </div>
  </button>
  <button data-action="lightbox#open" data-caption="Veneer Drying Line R3" title="" class="gallery__item js-lightbox-trigger" style="background-image: url(https://materials.raute.com/file/dl/c=system_640x/8TuYSg/ZQrvW1pBelFtE0UyPykGbw/veneer-drying-line-R3-Guoxu2.jpg);">
    <div style="display: none;" class="js-lightbox-content">
      <img src="https://materials.raute.com/file/dl/c=system_x1080/8TuYSg/ZQrvW1pBelFtE0UyPykGbw/veneer-drying-line-R3-Guoxu2.jpg" alt="">
    </div>
  </button>
  <button data-action="lightbox#open" data-caption="Veneer Patcher R3" title="" class="gallery__item is-video js-lightbox-trigger" style="background-image: url(https://materials.raute.com/file/dl/c=system_640x/Lzq1IQ/GqMw3t-CnCynn2DrVUJ8Xw/veneer-patcher-R3-animation.jpg);">
    <i class="icon icon--play ">
      <svg xmlns="http://www.w3.org/2000/svg" role="presentation">
        <use xlink:href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-play" href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-play"></use>
      </svg>
    </i>
    <div style="display: none;" class="js-lightbox-content">
      <video controls="">
        <source src="https://materials.raute.com/file/dl/i/Lzq1IQ/GqMw3t-CnCynn2DrVUJ8Xw/veneer-patcher-R3-animation.mp4" type="">
      </video>
    </div>
  </button>
  <button data-action="lightbox#open" data-caption="Raute Veneer Patcher R3 has the most advanced technology on the market for patching knots and holes in veneer. " title="" class="gallery__item js-lightbox-trigger" style="background-image: url(https://materials.raute.com/file/dl/c=system_640x/NvwLjw/q8Q8P8q-903Yp4cLhJ4UUw/veneer-patcher-R314.jpg);">
    <div style="display: none;" class="js-lightbox-content">
      <img src="https://materials.raute.com/file/dl/c=system_x1080/NvwLjw/q8Q8P8q-903Yp4cLhJ4UUw/veneer-patcher-R314.jpg" alt="">
    </div>
  </button>
  <button data-action="lightbox#open" data-caption="Veneer Patcher R3 needs very little floor space." title="" class="gallery__item js-lightbox-trigger" style="background-image: url(https://materials.raute.com/file/dl/c=system_640x/4ChbHQ/nSvGqQ3WxEwoBcLjcki0XA/raute-veneer-patcher-R32.jpg);">
    <div style="display: none;" class="js-lightbox-content">
      <img src="https://materials.raute.com/file/dl/c=system_x1080/4ChbHQ/nSvGqQ3WxEwoBcLjcki0XA/raute-veneer-patcher-R32.jpg" alt="">
    </div>
  </button>
  <button data-action="lightbox#open" data-caption="Plywood Lay-up Line R3" title="" class="gallery__item js-lightbox-trigger" style="background-image: url(https://materials.raute.com/file/dl/c=system_640x/kXqtog/ecGYPkSE3ayD9Pyga9rsiQ/plywood-lay-up-line-R3-overview-Guoxu.JPG7.jpg);">
    <div style="display: none;" class="js-lightbox-content">
      <img src="https://materials.raute.com/file/dl/c=system_x1080/kXqtog/ecGYPkSE3ayD9Pyga9rsiQ/plywood-lay-up-line-R3-overview-Guoxu.JPG7.jpg" alt="">
    </div>
  </button>
  <template data-target="lightbox.template">
    <div class="lightbox">
      <button class="lightbox__close js-lightbox-close">
        <i class="icon icon--close ">
          <svg xmlns="http://www.w3.org/2000/svg" role="presentation">
            <use href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-close"></use>
          </svg>
        </i>
      </button>
      <div class="lightbox__content"> 
        {{{ content }}} 
        <p class="lightbox__content-caption">{{ caption }}</p>
        {{# prev }}
          <button class="lightbox__prev js-lightbox-prev">
            <i class="icon icon--chevron-right ">
              <svg xmlns="http://www.w3.org/2000/svg" role="presentation">
                <use xlink:href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-chevron-right" href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-chevron-right"></use>
              </svg>
            </i>
          </button>
        {{/ prev }}
        {{# next }}
          <button class="lightbox__next js-lightbox-next">
            <i class="icon icon--chevron-right ">
              <svg xmlns="http://www.w3.org/2000/svg" role="presentation">
                <use xlink:href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-chevron-right" href="https://raute-admin.stage.crasman.cloud/static/studio/pub/system/web/raute/admin/icons/icons.svg#icon-chevron-right"></use>
              </svg>
            </i>
          </button>
        {{/ next }}
      </div>
    </div>
  </template>
</div>