{% include "@Components/sections/gallery-section/gallery-section.twig" with {props: {
header: {
heading: {
title: "Jak to u nás vypadá?"
},
perex: "V e-shopu můžete využít možnosti rychlého nákupu tašek od 100 ks po 20 000 ks, a to včetně potisku až v 6 přímých barvách nebo plnobarevně ve CMYK. Na výběr máme papírové tašky několika barev i rozměrů.",
},
items: gallery_items[:10],
gallery_id: "gallery_section-1"
}} %}
<section class="base-section s-gallery">
<div class="base-section__container container">
<header class="base-header d-flex flex-column gap-3 text-center align-items-center">
<h2 class="base-heading mb-0 u-fw-700 u-h2">
Jak to u nás vypadá?
</h2>
<div class="base-header__description entry-content mb-0">V e-shopu můžete využít možnosti rychlého nákupu tašek od 100 ks po 20 000 ks, a to včetně potisku až v 6 přímých barvách nebo plnobarevně ve CMYK. Na výběr máme papírové tašky několika barev i rozměrů.</div>
</header>
<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="gallery_section-1" 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="gallery_section-1" 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="gallery_section-1" 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="gallery_section-1" 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="gallery_section-1" 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="gallery_section-1" 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="gallery_section-1" 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="gallery_section-1" 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="gallery_section-1" 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="gallery_section-1" 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>
</div>
</section>
