Photogallery

Two items variant 

  •         {% include "@Components/photogallery/photogallery.twig" with {props: {
  gallery_id: "variant2",
  photos: [
    {
      main: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg"
        }
      },
      thumb: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg",
        }
      }
    },
    {
      main: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg"
        }
      },
      thumb: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg",
        }
      }
    }
  ]
}} %}


      
  •           <div class="c-photogallery u-posr">
        <div class="row c-photogallery__row g-2">
      <div class="c-photogallery__col col-6">
      <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover --hero  h-100 u-rounded-3" data-fancybox="variant2" data-src="https://i.imgur.com/5cvZzqk.jpeg">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="696" height="464" draggable="false">
  </picture>
</div>

  </div>
    </div>
      <div class="c-photogallery__col col-6">
      <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover --hero  h-100 u-rounded-3" data-fancybox="variant2" data-src="https://i.imgur.com/5cvZzqk.jpeg">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="696" height="464" draggable="false">
  </picture>
</div>

  </div>
    </div>
  </div>
  
  </div>

Three items variant 

  •         {% include "@Components/photogallery/photogallery.twig" with {props: {
  photos: [
    {
      main: {
        video: {
          src: "https://www.youtube.com/watch?v=YQHsXMglC9A"
        }
      },
      thumb: {
        video: {
          src: "https://img.youtube.com/vi/YQHsXMglC9A/maxresdefault.jpg"
          }
        }
    },
    {
      main: {
        img: {
          src: "https://source.unsplash.com/FV3GConVSss/"
        }
      },
      thumb: {
        img: {
          src: "https://placehold.co/640x480",
          srcset: [
            "https://placehold.co/640x480 1x",
            "https://placehold.co/1280x960 2x"
          ]
        }
      }
    },
    {
      main: {
        img: {
          src: "https://source.unsplash.com/FV3GConVSss/"
        }
      },
      thumb: {
        img: {
          src: "https://placehold.co/640x480",
          srcset: [
            "https://placehold.co/640x480 1x",
            "https://placehold.co/1280x960 2x"
          ]
        }
      }
    }
  ]
}} %}

      
  •           <div class="c-photogallery u-posr --variant-3">
        <div class="row c-photogallery__row g-2">
      <div class="c-photogallery__col col-6 col-md-4">
      <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover  --video  h-100 u-rounded-3" data-fancybox data-src="https://www.youtube.com/watch?v=YQHsXMglC9A">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://img.youtube.com/vi/YQHsXMglC9A/maxresdefault.jpg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

      <div class="c-photogallery__play-icon u-posa u-top-50-p u-left-50-p u-translate-middle u-bg-white px-2 py-1 u-rounded-3 ">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12.343 6.326 4 1v14l8.34-5.346a1.967 1.967 0 0 0 .004-3.328Zm-6.508 5.318V4.348l5.525 3.527.004.002a.132.132 0 0 1 .06.112.13.13 0 0 1-.061.11l-.188.116v.006l-5.34 3.423Z" clip-rule="evenodd"/></svg>      </span>
    </div>
  </div>
    </div>
      <div class="c-photogallery__col col-6 col-md-4">
      <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox data-src="https://source.unsplash.com/FV3GConVSss/">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://placehold.co/640x480" alt="" width="340" height="224" draggable="false" srcset="" data-srcset="https://placehold.co/640x480 1x, https://placehold.co/1280x960 2x">
  </picture>
</div>

  </div>
    </div>
      <div class="c-photogallery__col col-6 col-md-4">
      <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox data-src="https://source.unsplash.com/FV3GConVSss/">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://placehold.co/640x480" alt="" width="340" height="224" draggable="false" srcset="" data-srcset="https://placehold.co/640x480 1x, https://placehold.co/1280x960 2x">
  </picture>
</div>

  </div>
    </div>
  </div>
  
  </div>

Four items variant 

  •         {% include "@Components/photogallery/photogallery.twig" with {props: {
  gallery_id: "gallery7",
  photos: [
    {
      main: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg"
        }
      },
      thumb: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg",
        }
      }
    },
    {
      main: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg"
        }
      },
      thumb: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg",
        }
      }
    },
    {
      main: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg"
        }
      },
      thumb: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg",
        }
      }
    },
    {
      main: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg"
        }
      },
      thumb: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg",
        }
      }
    }
  ]
}} %}


      
  •           <div class="c-photogallery u-posr">
        <div class="row c-photogallery__row g-2">
      <div class="c-photogallery__col col-6 col-md-3">
      <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://i.imgur.com/5cvZzqk.jpeg">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

  </div>
    </div>
      <div class="c-photogallery__col col-6 col-md-3">
      <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://i.imgur.com/5cvZzqk.jpeg">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

  </div>
    </div>
      <div class="c-photogallery__col col-6 col-md-3">
      <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://i.imgur.com/5cvZzqk.jpeg">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

  </div>
    </div>
      <div class="c-photogallery__col col-6 col-md-3">
      <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://i.imgur.com/5cvZzqk.jpeg">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

  </div>
    </div>
  </div>
  
  </div>

Variant of 5 items 

  •         {% include "@Components/photogallery/photogallery.twig" with {props: {
  gallery_id: "sample1",
  photos: gallery_items[:5]
  }} %}

      
  •           <div class="c-photogallery u-posr">
      <div class="row g-2">
      <div class="col-md-6">
      <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover --hero --video  h-100 u-rounded-3" data-fancybox="sample1" data-src="https://www.youtube.com/watch?v=YQHsXMglC9A">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://img.youtube.com/vi/YQHsXMglC9A/maxresdefault.jpg" alt="" width="696" height="464" draggable="false">
  </picture>
</div>

      <div class="c-photogallery__play-icon u-posa u-top-50-p u-left-50-p u-translate-middle u-bg-white px-2 py-1 u-rounded-3  px-sm-4 py-sm-2">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion --xl">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12.343 6.326 4 1v14l8.34-5.346a1.967 1.967 0 0 0 .004-3.328Zm-6.508 5.318V4.348l5.525 3.527.004.002a.132.132 0 0 1 .06.112.13.13 0 0 1-.061.11l-.188.116v.006l-5.34 3.423Z" clip-rule="evenodd"/></svg>      </span>
    </div>
  </div>
    </div>
  
  <div class="col-md-6">
    <div class="row g-2">
                        <div class="col-6">
            <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="sample1" data-src="https://i.imgur.com/5cvZzqk.jpeg">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

  </div>
          </div>
                  <div class="col-6">
            <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="sample1" data-src="https://placehold.co/1600x900">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://placehold.co/640x480" alt="" width="340" height="224" draggable="false" srcset="" data-srcset="https://placehold.co/640x480 1x, https://placehold.co/1280x960 2x">
  </picture>
</div>

  </div>
          </div>
                  <div class="col-6">
            <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="sample1" data-src="https://i.imgur.com/5cvZzqk.jpeg">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

  </div>
          </div>
                  <div class="col-6">
            <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover  --video  h-100 u-rounded-3" data-fancybox="sample1" data-src="https://www.youtube.com/watch?v=YQHsXMglC9A">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://img.youtube.com/vi/YQHsXMglC9A/maxresdefault.jpg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

      <div class="c-photogallery__play-icon u-posa u-top-50-p u-left-50-p u-translate-middle u-bg-white px-2 py-1 u-rounded-3 ">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12.343 6.326 4 1v14l8.34-5.346a1.967 1.967 0 0 0 .004-3.328Zm-6.508 5.318V4.348l5.525 3.527.004.002a.132.132 0 0 1 .06.112.13.13 0 0 1-.061.11l-.188.116v.006l-5.34 3.423Z" clip-rule="evenodd"/></svg>      </span>
    </div>
  </div>
          </div>
                  </div>
  </div>

  </div>

    
  
      <div class="c-photogallery__decoration u-rounded-full u-bg-white u-posa u-top-50-p u-left-50-p u-translate-middle d-flex justify-content-center align-items-center p-1 p-md-2">
      <div class="img u-posr overflow-hidden   --ratio-1-1">
  <picture>
    
    <img src="" data-src="/images/svg/slogan.svg" alt="" width="152" height="152" draggable="false">
  </picture>
</div>
    </div>
  </div>

Variant of 6 items 

  •         {% include "@Components/photogallery/photogallery.twig" with {props: {
  photos: gallery_items[:6]
}} %}

      
  •           <div class="c-photogallery u-posr">
      <div class="row g-2">
      <div class="col-md-6">
      <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover --hero --video  h-100 u-rounded-3" data-fancybox data-src="https://www.youtube.com/watch?v=YQHsXMglC9A">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://img.youtube.com/vi/YQHsXMglC9A/maxresdefault.jpg" alt="" width="696" height="464" draggable="false">
  </picture>
</div>

      <div class="c-photogallery__play-icon u-posa u-top-50-p u-left-50-p u-translate-middle u-bg-white px-2 py-1 u-rounded-3  px-sm-4 py-sm-2">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion --xl">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12.343 6.326 4 1v14l8.34-5.346a1.967 1.967 0 0 0 .004-3.328Zm-6.508 5.318V4.348l5.525 3.527.004.002a.132.132 0 0 1 .06.112.13.13 0 0 1-.061.11l-.188.116v.006l-5.34 3.423Z" clip-rule="evenodd"/></svg>      </span>
    </div>
  </div>
    </div>
  
  <div class="col-md-6">
    <div class="row g-2">
                        <div class="col-6">
            <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox data-src="https://i.imgur.com/5cvZzqk.jpeg">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

  </div>
          </div>
                  <div class="col-6">
            <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox data-src="https://placehold.co/1600x900">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://placehold.co/640x480" alt="" width="340" height="224" draggable="false" srcset="" data-srcset="https://placehold.co/640x480 1x, https://placehold.co/1280x960 2x">
  </picture>
</div>

  </div>
          </div>
                  <div class="col-6">
            <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox data-src="https://i.imgur.com/5cvZzqk.jpeg">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

  </div>
          </div>
                  <div class="col-6">
            <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover  --video  h-100 u-rounded-3" data-fancybox data-src="https://www.youtube.com/watch?v=YQHsXMglC9A">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://img.youtube.com/vi/YQHsXMglC9A/maxresdefault.jpg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

      <div class="c-photogallery__play-icon u-posa u-top-50-p u-left-50-p u-translate-middle u-bg-white px-2 py-1 u-rounded-3 ">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12.343 6.326 4 1v14l8.34-5.346a1.967 1.967 0 0 0 .004-3.328Zm-6.508 5.318V4.348l5.525 3.527.004.002a.132.132 0 0 1 .06.112.13.13 0 0 1-.061.11l-.188.116v.006l-5.34 3.423Z" clip-rule="evenodd"/></svg>      </span>
    </div>
  </div>
          </div>
                  </div>
  </div>

  </div>

    
  
      <div class="c-photogallery__decoration u-rounded-full u-bg-white u-posa u-top-50-p u-left-50-p u-translate-middle d-flex justify-content-center align-items-center p-1 p-md-2">
      <div class="img u-posr overflow-hidden   --ratio-1-1">
  <picture>
    
    <img src="" data-src="/images/svg/slogan.svg" alt="" width="152" height="152" draggable="false">
  </picture>
</div>
    </div>
  </div>

Variant of 7 items 

  •         {% include "@Components/photogallery/photogallery.twig" with {props: {
  gallery_id: "gallery7",
  photos: [
    {
      main: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg"
        }
      },
      thumb: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg",
        }
      }
    },
    {
      main: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg"
        }
      },
      thumb: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg",
        }
      }
    },
    {
      main: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg"
        }
      },
      thumb: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg",
        }
      }
    },
    {
      main: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg"
        }
      },
      thumb: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg",
        }
      }
    },
    {
      main: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg"
        }
      },
      thumb: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg",
        }
      }
    },
    {
      main: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg"
        }
      },
      thumb: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg",
        }
      }
    },
    {
      main: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg"
        }
      },
      thumb: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg",
        }
      }
    }
  ]
}} %}


      
  •           <div class="c-photogallery u-posr --variant-7">
      <div class="row g-2">
      <div class="col-md-6">
      <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover --hero  h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://i.imgur.com/5cvZzqk.jpeg">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="696" height="464" draggable="false">
  </picture>
</div>

  </div>
    </div>
  
  <div class="col-md-6">
    <div class="row g-2">
                        <div class="col-6">
            <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://i.imgur.com/5cvZzqk.jpeg">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

  </div>
          </div>
                  <div class="col-6">
            <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://i.imgur.com/5cvZzqk.jpeg">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

  </div>
          </div>
                  <div class="col-6">
            <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://i.imgur.com/5cvZzqk.jpeg">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

  </div>
          </div>
                  <div class="col-6">
            <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://i.imgur.com/5cvZzqk.jpeg">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

  </div>
          </div>
                  </div>
  </div>

  </div>

            <div class="row c-photogallery__row g-2 mt-0">
      <div class="c-photogallery__col col-6">
      <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover --hero  h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://i.imgur.com/5cvZzqk.jpeg">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="696" height="464" draggable="false">
  </picture>
</div>

  </div>
    </div>
      <div class="c-photogallery__col col-6">
      <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover --hero  h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://i.imgur.com/5cvZzqk.jpeg">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="696" height="464" draggable="false">
  </picture>
</div>

  </div>
    </div>
  </div>
    
  
      <div class="c-photogallery__decoration u-rounded-full u-bg-white u-posa u-top-50-p u-left-50-p u-translate-middle d-flex justify-content-center align-items-center p-1 p-md-2">
      <div class="img u-posr overflow-hidden   --ratio-1-1">
  <picture>
    
    <img src="" data-src="/images/svg/slogan.svg" alt="" width="152" height="152" draggable="false">
  </picture>
</div>
    </div>
  </div>

Variant of 8 items 

  •         {% include "@Components/photogallery/photogallery.twig" with {props: {
  gallery_id: "gallery7",
  photos: [
    {
      main: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg"
        }
      },
      thumb: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg",
        }
      }
    },
    {
      main: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg"
        }
      },
      thumb: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg",
        }
      }
    },
    {
      main: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg"
        }
      },
      thumb: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg",
        }
      }
    },
    {
      main: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg"
        }
      },
      thumb: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg",
        }
      }
    },
    {
      main: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg"
        }
      },
      thumb: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg",
        }
      }
    },
    {
      main: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg"
        }
      },
      thumb: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg",
        }
      }
    },
    {
      main: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg"
        }
      },
      thumb: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg",
        }
      }
    },
    {
      main: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg"
        }
      },
      thumb: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg",
        }
      }
    }
  ]
}} %}


      
  •           <div class="c-photogallery u-posr --variant-8">
      <div class="row g-2">
      <div class="col-md-6">
      <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover --hero  h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://i.imgur.com/5cvZzqk.jpeg">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="696" height="464" draggable="false">
  </picture>
</div>

  </div>
    </div>
  
  <div class="col-md-6">
    <div class="row g-2">
                        <div class="col-6">
            <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://i.imgur.com/5cvZzqk.jpeg">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

  </div>
          </div>
                  <div class="col-6">
            <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://i.imgur.com/5cvZzqk.jpeg">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

  </div>
          </div>
                  <div class="col-6">
            <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://i.imgur.com/5cvZzqk.jpeg">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

  </div>
          </div>
                  <div class="col-6">
            <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://i.imgur.com/5cvZzqk.jpeg">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

  </div>
          </div>
                  </div>
  </div>

  </div>

            <div class="row c-photogallery__row g-2 mt-0">
      <div class="c-photogallery__col col-6 col-md-4">
      <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://i.imgur.com/5cvZzqk.jpeg">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

  </div>
    </div>
      <div class="c-photogallery__col col-6 col-md-4">
      <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://i.imgur.com/5cvZzqk.jpeg">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

  </div>
    </div>
      <div class="c-photogallery__col col-6 col-md-4">
      <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://i.imgur.com/5cvZzqk.jpeg">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

  </div>
    </div>
  </div>
    
  
      <div class="c-photogallery__decoration u-rounded-full u-bg-white u-posa u-top-50-p u-left-50-p u-translate-middle d-flex justify-content-center align-items-center p-1 p-md-2">
      <div class="img u-posr overflow-hidden   --ratio-1-1">
  <picture>
    
    <img src="" data-src="/images/svg/slogan.svg" alt="" width="152" height="152" draggable="false">
  </picture>
</div>
    </div>
  </div>

Variant of 9 items 

  •         {% include "@Components/photogallery/photogallery.twig" with {props: {
  gallery_id: "gallery7",
  photos: [
    {
      main: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg"
        }
      },
      thumb: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg",
        }
      }
    },
    {
      main: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg"
        }
      },
      thumb: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg",
        }
      }
    },
    {
      main: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg"
        }
      },
      thumb: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg",
        }
      }
    },
    {
      main: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg"
        }
      },
      thumb: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg",
        }
      }
    },
    {
      main: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg"
        }
      },
      thumb: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg",
        }
      }
    },
    {
      main: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg"
        }
      },
      thumb: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg",
        }
      }
    },
    {
      main: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg"
        }
      },
      thumb: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg",
        }
      }
    },
    {
      main: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg"
        }
      },
      thumb: {
        img: {
          src: "https://i.imgur.com/5cvZzqk.jpeg",
        }
      }
    },
    {
      main: {
        video: {
          src: "https://www.youtube.com/watch?v=YQHsXMglC9A"
        }
      },
      thumb: {
        video: {
          src: "https://img.youtube.com/vi/YQHsXMglC9A/maxresdefault.jpg"
        }
      }
    }
  ]
}} %}


      
  •           <div class="c-photogallery u-posr --variant-9">
      <div class="row g-2">
      <div class="col-md-6">
      <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover --hero  h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://i.imgur.com/5cvZzqk.jpeg">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="696" height="464" draggable="false">
  </picture>
</div>

  </div>
    </div>
  
  <div class="col-md-6">
    <div class="row g-2">
                        <div class="col-6">
            <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://i.imgur.com/5cvZzqk.jpeg">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

  </div>
          </div>
                  <div class="col-6">
            <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://i.imgur.com/5cvZzqk.jpeg">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

  </div>
          </div>
                  <div class="col-6">
            <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://i.imgur.com/5cvZzqk.jpeg">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

  </div>
          </div>
                  <div class="col-6">
            <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://i.imgur.com/5cvZzqk.jpeg">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

  </div>
          </div>
                  </div>
  </div>

  </div>

            <div class="row c-photogallery__row g-2 mt-0">
      <div class="c-photogallery__col col-6 col-md-3">
      <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://i.imgur.com/5cvZzqk.jpeg">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

  </div>
    </div>
      <div class="c-photogallery__col col-6 col-md-3">
      <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://i.imgur.com/5cvZzqk.jpeg">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

  </div>
    </div>
      <div class="c-photogallery__col col-6 col-md-3">
      <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://i.imgur.com/5cvZzqk.jpeg">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

  </div>
    </div>
      <div class="c-photogallery__col col-6 col-md-3">
      <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover  --video  h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://www.youtube.com/watch?v=YQHsXMglC9A">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://img.youtube.com/vi/YQHsXMglC9A/maxresdefault.jpg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

      <div class="c-photogallery__play-icon u-posa u-top-50-p u-left-50-p u-translate-middle u-bg-white px-2 py-1 u-rounded-3 ">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12.343 6.326 4 1v14l8.34-5.346a1.967 1.967 0 0 0 .004-3.328Zm-6.508 5.318V4.348l5.525 3.527.004.002a.132.132 0 0 1 .06.112.13.13 0 0 1-.061.11l-.188.116v.006l-5.34 3.423Z" clip-rule="evenodd"/></svg>      </span>
    </div>
  </div>
    </div>
  </div>
    
  
      <div class="c-photogallery__decoration u-rounded-full u-bg-white u-posa u-top-50-p u-left-50-p u-translate-middle d-flex justify-content-center align-items-center p-1 p-md-2">
      <div class="img u-posr overflow-hidden   --ratio-1-1">
  <picture>
    
    <img src="" data-src="/images/svg/slogan.svg" alt="" width="152" height="152" draggable="false">
  </picture>
</div>
    </div>
  </div>

Variant of 10 items 

  •         {% include "@Components/photogallery/photogallery.twig" with {props: {
  gallery_id: "sample2",
  photos: gallery_items[:10]
  }} %}

      
  •           <div class="c-photogallery u-posr">
      <div class="row g-2">
      <div class="col-md-6">
      <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover --hero --video  h-100 u-rounded-3" data-fancybox="sample2" data-src="https://www.youtube.com/watch?v=YQHsXMglC9A">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://img.youtube.com/vi/YQHsXMglC9A/maxresdefault.jpg" alt="" width="696" height="464" draggable="false">
  </picture>
</div>

      <div class="c-photogallery__play-icon u-posa u-top-50-p u-left-50-p u-translate-middle u-bg-white px-2 py-1 u-rounded-3  px-sm-4 py-sm-2">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion --xl">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12.343 6.326 4 1v14l8.34-5.346a1.967 1.967 0 0 0 .004-3.328Zm-6.508 5.318V4.348l5.525 3.527.004.002a.132.132 0 0 1 .06.112.13.13 0 0 1-.061.11l-.188.116v.006l-5.34 3.423Z" clip-rule="evenodd"/></svg>      </span>
    </div>
  </div>
    </div>
  
  <div class="col-md-6">
    <div class="row g-2">
                        <div class="col-6">
            <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="sample2" data-src="https://i.imgur.com/5cvZzqk.jpeg">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

  </div>
          </div>
                  <div class="col-6">
            <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="sample2" data-src="https://placehold.co/1600x900">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://placehold.co/640x480" alt="" width="340" height="224" draggable="false" srcset="" data-srcset="https://placehold.co/640x480 1x, https://placehold.co/1280x960 2x">
  </picture>
</div>

  </div>
          </div>
                  <div class="col-6">
            <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="sample2" data-src="https://i.imgur.com/5cvZzqk.jpeg">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

  </div>
          </div>
                  <div class="col-6">
            <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover  --video  h-100 u-rounded-3" data-fancybox="sample2" data-src="https://www.youtube.com/watch?v=YQHsXMglC9A">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://img.youtube.com/vi/YQHsXMglC9A/maxresdefault.jpg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

      <div class="c-photogallery__play-icon u-posa u-top-50-p u-left-50-p u-translate-middle u-bg-white px-2 py-1 u-rounded-3 ">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12.343 6.326 4 1v14l8.34-5.346a1.967 1.967 0 0 0 .004-3.328Zm-6.508 5.318V4.348l5.525 3.527.004.002a.132.132 0 0 1 .06.112.13.13 0 0 1-.061.11l-.188.116v.006l-5.34 3.423Z" clip-rule="evenodd"/></svg>      </span>
    </div>
  </div>
          </div>
                  </div>
  </div>

  </div>

          <div class="row g-2 mt-0">
  
  <div class="col-md-6">
    <div class="row g-2">
                        <div class="col-6">
            <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover  --video  h-100 u-rounded-3" data-fancybox="sample2" data-src="https://www.youtube.com/watch?v=YQHsXMglC9A">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://img.youtube.com/vi/YQHsXMglC9A/maxresdefault.jpg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

      <div class="c-photogallery__play-icon u-posa u-top-50-p u-left-50-p u-translate-middle u-bg-white px-2 py-1 u-rounded-3 ">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12.343 6.326 4 1v14l8.34-5.346a1.967 1.967 0 0 0 .004-3.328Zm-6.508 5.318V4.348l5.525 3.527.004.002a.132.132 0 0 1 .06.112.13.13 0 0 1-.061.11l-.188.116v.006l-5.34 3.423Z" clip-rule="evenodd"/></svg>      </span>
    </div>
  </div>
          </div>
                  <div class="col-6">
            <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="sample2" data-src="https://placehold.co/1600x900">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://placehold.co/640x480" alt="" width="340" height="224" draggable="false" srcset="" data-srcset="https://placehold.co/640x480 1x, https://placehold.co/1280x960 2x">
  </picture>
</div>

  </div>
          </div>
                  <div class="col-6">
            <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="sample2" data-src="https://placehold.co/1600x900">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://placehold.co/640x480" alt="" width="340" height="224" draggable="false" srcset="" data-srcset="https://placehold.co/640x480 1x, https://placehold.co/1280x960 2x">
  </picture>
</div>

  </div>
          </div>
                  <div class="col-6">
            <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="sample2" data-src="https://placehold.co/1600x900">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://placehold.co/640x480" alt="" width="340" height="224" draggable="false" srcset="" data-srcset="https://placehold.co/640x480 1x, https://placehold.co/1280x960 2x">
  </picture>
</div>

  </div>
          </div>
                  </div>
  </div>

      <div class="col-md-6">
      <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover --hero  h-100 u-rounded-3" data-fancybox="sample2" data-src="https://i.imgur.com/5cvZzqk.jpeg">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="696" height="464" draggable="false">
  </picture>
</div>

  </div>
    </div>
  </div>
    
  
      <div class="c-photogallery__decoration u-rounded-full u-bg-white u-posa u-top-50-p u-left-50-p u-translate-middle d-flex justify-content-center align-items-center p-1 p-md-2">
      <div class="img u-posr overflow-hidden   --ratio-1-1">
  <picture>
    
    <img src="" data-src="/images/svg/slogan.svg" alt="" width="152" height="152" draggable="false">
  </picture>
</div>
    </div>
  </div>

Variant of more than 10 items 

  •         {% include "@Components/photogallery/photogallery.twig" with {props: {
  gallery_id: "gallery7",
  photos: gallery_items
}} %}


      
  •           <div class="c-photogallery u-posr">
      <div class="row g-2">
      <div class="col-md-6">
      <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover --hero --video  h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://www.youtube.com/watch?v=YQHsXMglC9A">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://img.youtube.com/vi/YQHsXMglC9A/maxresdefault.jpg" alt="" width="696" height="464" draggable="false">
  </picture>
</div>

      <div class="c-photogallery__play-icon u-posa u-top-50-p u-left-50-p u-translate-middle u-bg-white px-2 py-1 u-rounded-3  px-sm-4 py-sm-2">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion --xl">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12.343 6.326 4 1v14l8.34-5.346a1.967 1.967 0 0 0 .004-3.328Zm-6.508 5.318V4.348l5.525 3.527.004.002a.132.132 0 0 1 .06.112.13.13 0 0 1-.061.11l-.188.116v.006l-5.34 3.423Z" clip-rule="evenodd"/></svg>      </span>
    </div>
  </div>
    </div>
  
  <div class="col-md-6">
    <div class="row g-2">
                        <div class="col-6">
            <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://i.imgur.com/5cvZzqk.jpeg">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

  </div>
          </div>
                  <div class="col-6">
            <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://placehold.co/1600x900">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://placehold.co/640x480" alt="" width="340" height="224" draggable="false" srcset="" data-srcset="https://placehold.co/640x480 1x, https://placehold.co/1280x960 2x">
  </picture>
</div>

  </div>
          </div>
                  <div class="col-6">
            <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://i.imgur.com/5cvZzqk.jpeg">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

  </div>
          </div>
                  <div class="col-6">
            <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover  --video  h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://www.youtube.com/watch?v=YQHsXMglC9A">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://img.youtube.com/vi/YQHsXMglC9A/maxresdefault.jpg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

      <div class="c-photogallery__play-icon u-posa u-top-50-p u-left-50-p u-translate-middle u-bg-white px-2 py-1 u-rounded-3 ">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12.343 6.326 4 1v14l8.34-5.346a1.967 1.967 0 0 0 .004-3.328Zm-6.508 5.318V4.348l5.525 3.527.004.002a.132.132 0 0 1 .06.112.13.13 0 0 1-.061.11l-.188.116v.006l-5.34 3.423Z" clip-rule="evenodd"/></svg>      </span>
    </div>
  </div>
          </div>
                  </div>
  </div>

  </div>

          <div class="row g-2 mt-0">
  
  <div class="col-md-6">
    <div class="row g-2">
                        <div class="col-6">
            <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover  --video  h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://www.youtube.com/watch?v=YQHsXMglC9A">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://img.youtube.com/vi/YQHsXMglC9A/maxresdefault.jpg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

      <div class="c-photogallery__play-icon u-posa u-top-50-p u-left-50-p u-translate-middle u-bg-white px-2 py-1 u-rounded-3 ">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12.343 6.326 4 1v14l8.34-5.346a1.967 1.967 0 0 0 .004-3.328Zm-6.508 5.318V4.348l5.525 3.527.004.002a.132.132 0 0 1 .06.112.13.13 0 0 1-.061.11l-.188.116v.006l-5.34 3.423Z" clip-rule="evenodd"/></svg>      </span>
    </div>
  </div>
          </div>
                  <div class="col-6">
            <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://placehold.co/1600x900">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://placehold.co/640x480" alt="" width="340" height="224" draggable="false" srcset="" data-srcset="https://placehold.co/640x480 1x, https://placehold.co/1280x960 2x">
  </picture>
</div>

  </div>
          </div>
                  <div class="col-6">
            <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://placehold.co/1600x900">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://placehold.co/640x480" alt="" width="340" height="224" draggable="false" srcset="" data-srcset="https://placehold.co/640x480 1x, https://placehold.co/1280x960 2x">
  </picture>
</div>

  </div>
          </div>
                  <div class="col-6">
            <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://placehold.co/1600x900">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://placehold.co/640x480" alt="" width="340" height="224" draggable="false" srcset="" data-srcset="https://placehold.co/640x480 1x, https://placehold.co/1280x960 2x">
  </picture>
</div>

  </div>
          </div>
                  </div>
  </div>

      <div class="col-md-6">
      <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover --hero --video  h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://www.youtube.com/watch?v=YQHsXMglC9A">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://img.youtube.com/vi/YQHsXMglC9A/maxresdefault.jpg" alt="" width="696" height="464" draggable="false">
  </picture>
</div>

      <div class="c-photogallery__play-icon u-posa u-top-50-p u-left-50-p u-translate-middle u-bg-white px-2 py-1 u-rounded-3  px-sm-4 py-sm-2">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion --xl">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12.343 6.326 4 1v14l8.34-5.346a1.967 1.967 0 0 0 .004-3.328Zm-6.508 5.318V4.348l5.525 3.527.004.002a.132.132 0 0 1 .06.112.13.13 0 0 1-.061.11l-.188.116v.006l-5.34 3.423Z" clip-rule="evenodd"/></svg>      </span>
    </div>
  </div>
    </div>
  </div>
    
  
      <div class="c-photogallery__decoration u-rounded-full u-bg-white u-posa u-top-50-p u-left-50-p u-translate-middle d-flex justify-content-center align-items-center p-1 p-md-2">
      <div class="img u-posr overflow-hidden   --ratio-1-1">
  <picture>
    
    <img src="" data-src="/images/svg/slogan.svg" alt="" width="152" height="152" draggable="false">
  </picture>
</div>
    </div>
  </div>

Inline content gallery 

  •         {% include "@Components/photogallery/photogallery--inline.twig" with {props: {
  gallery_id: "gallery7",
  photos: gallery_items,
  items_on_row: 4
}} %}

      
  •           
<div class="c-photogallery --inline">
      
            <div class="row c-photogallery__row g-2 mb-2">
      <div class="c-photogallery__col col-6 col-md-3">
      <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover  --video  h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://www.youtube.com/watch?v=YQHsXMglC9A">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://img.youtube.com/vi/YQHsXMglC9A/maxresdefault.jpg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

      <div class="c-photogallery__play-icon u-posa u-top-50-p u-left-50-p u-translate-middle u-bg-white px-2 py-1 u-rounded-3 ">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12.343 6.326 4 1v14l8.34-5.346a1.967 1.967 0 0 0 .004-3.328Zm-6.508 5.318V4.348l5.525 3.527.004.002a.132.132 0 0 1 .06.112.13.13 0 0 1-.061.11l-.188.116v.006l-5.34 3.423Z" clip-rule="evenodd"/></svg>      </span>
    </div>
  </div>
    </div>
      <div class="c-photogallery__col col-6 col-md-3">
      <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://i.imgur.com/5cvZzqk.jpeg">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

  </div>
    </div>
      <div class="c-photogallery__col col-6 col-md-3">
      <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://placehold.co/1600x900">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://placehold.co/640x480" alt="" width="340" height="224" draggable="false" srcset="" data-srcset="https://placehold.co/640x480 1x, https://placehold.co/1280x960 2x">
  </picture>
</div>

  </div>
    </div>
      <div class="c-photogallery__col col-6 col-md-3">
      <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://i.imgur.com/5cvZzqk.jpeg">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

  </div>
    </div>
  </div>
          
            <div class="row c-photogallery__row g-2 mb-2">
      <div class="c-photogallery__col col-6 col-md-3">
      <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover  --video  h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://www.youtube.com/watch?v=YQHsXMglC9A">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://img.youtube.com/vi/YQHsXMglC9A/maxresdefault.jpg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

      <div class="c-photogallery__play-icon u-posa u-top-50-p u-left-50-p u-translate-middle u-bg-white px-2 py-1 u-rounded-3 ">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12.343 6.326 4 1v14l8.34-5.346a1.967 1.967 0 0 0 .004-3.328Zm-6.508 5.318V4.348l5.525 3.527.004.002a.132.132 0 0 1 .06.112.13.13 0 0 1-.061.11l-.188.116v.006l-5.34 3.423Z" clip-rule="evenodd"/></svg>      </span>
    </div>
  </div>
    </div>
      <div class="c-photogallery__col col-6 col-md-3">
      <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover  --video  h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://www.youtube.com/watch?v=YQHsXMglC9A">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://img.youtube.com/vi/YQHsXMglC9A/maxresdefault.jpg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

      <div class="c-photogallery__play-icon u-posa u-top-50-p u-left-50-p u-translate-middle u-bg-white px-2 py-1 u-rounded-3 ">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12.343 6.326 4 1v14l8.34-5.346a1.967 1.967 0 0 0 .004-3.328Zm-6.508 5.318V4.348l5.525 3.527.004.002a.132.132 0 0 1 .06.112.13.13 0 0 1-.061.11l-.188.116v.006l-5.34 3.423Z" clip-rule="evenodd"/></svg>      </span>
    </div>
  </div>
    </div>
      <div class="c-photogallery__col col-6 col-md-3">
      <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://placehold.co/1600x900">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://placehold.co/640x480" alt="" width="340" height="224" draggable="false" srcset="" data-srcset="https://placehold.co/640x480 1x, https://placehold.co/1280x960 2x">
  </picture>
</div>

  </div>
    </div>
      <div class="c-photogallery__col col-6 col-md-3">
      <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://placehold.co/1600x900">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://placehold.co/640x480" alt="" width="340" height="224" draggable="false" srcset="" data-srcset="https://placehold.co/640x480 1x, https://placehold.co/1280x960 2x">
  </picture>
</div>

  </div>
    </div>
  </div>
          
            <div class="row c-photogallery__row g-2 mb-2">
      <div class="c-photogallery__col col-6 col-md-3">
      <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://placehold.co/1600x900">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://placehold.co/640x480" alt="" width="340" height="224" draggable="false" srcset="" data-srcset="https://placehold.co/640x480 1x, https://placehold.co/1280x960 2x">
  </picture>
</div>

  </div>
    </div>
      <div class="c-photogallery__col col-6 col-md-3">
      <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://i.imgur.com/5cvZzqk.jpeg">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://i.imgur.com/5cvZzqk.jpeg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

  </div>
    </div>
      <div class="c-photogallery__col col-6 col-md-3">
      <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover   h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://placehold.co/1600x900">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://placehold.co/640x480" alt="" width="340" height="224" draggable="false" srcset="" data-srcset="https://placehold.co/640x480 1x, https://placehold.co/1280x960 2x">
  </picture>
</div>

  </div>
    </div>
      <div class="c-photogallery__col col-6 col-md-3">
      <div class="c-photogallery__thumb u-posr u-cursor-pointer u-img-hover  --video  h-100 u-rounded-3" data-fancybox="gallery7" data-src="https://www.youtube.com/watch?v=YQHsXMglC9A">
  <div class="img u-posr overflow-hidden --cover --placeholder --ratio-3-2 w-100 u-rounded-3">
  <picture>
    
    <img src="" data-src="https://img.youtube.com/vi/YQHsXMglC9A/maxresdefault.jpg" alt="" width="340" height="224" draggable="false">
  </picture>
</div>

      <div class="c-photogallery__play-icon u-posa u-top-50-p u-left-50-p u-translate-middle u-bg-white px-2 py-1 u-rounded-3 ">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12.343 6.326 4 1v14l8.34-5.346a1.967 1.967 0 0 0 .004-3.328Zm-6.508 5.318V4.348l5.525 3.527.004.002a.132.132 0 0 1 .06.112.13.13 0 0 1-.061.11l-.188.116v.006l-5.34 3.423Z" clip-rule="evenodd"/></svg>      </span>
    </div>
  </div>
    </div>
  </div>
          
      
  </div>