{% include "@Components/sections/events-section/events-section.twig" with {props: {
header: {
heading: {
title: "Plánované akce"
},
overline: {
title: "události",
},
perex: "Mě po lámu portrét z vyspí. Ho to sto kůlničku – on. Křik dovezu, au šnek vyl nožem dolů vlastním mých.",
},
items: events_sample[:4],
buttons: {
primary: {
title: "Vice akcí",
url: "#",
},
},
}} %}
<section class="base-section s-events">
<div class="base-section__container container">
<header class="base-header d-flex flex-column gap-3 text-center align-items-center">
<span class="c-overline d-inline-flex gap-1 align-items-center u-fz-sm px-1 u-bg-primary-100">
<span class="c-overline__title">události</span>
</span>
<h2 class="base-heading mb-0 u-fw-700 u-h2">
Plánované akce
</h2>
<div class="base-header__description entry-content mb-0">Mě po lámu portrét z vyspí. Ho to sto kůlničku – on. Křik dovezu, au šnek vyl nožem dolů vlastním mých.</div>
</header>
<div class="g-events gap-4 d-flex flex-column">
<div class="g-events__cell">
<article class="i-event d-flex gap-3 --inline">
<a href="#event" class="i-event__image-link d-block u-img-hover flex-shrink-0" title="Výstava Třeboňsko - krajina dvojího nebe">
<div class="img u-posr overflow-hidden --cover --placeholder">
<picture>
<img src="" data-src="https://placehold.co/320x240" alt="Výstava Třeboňsko - krajina dvojího nebe" width="320" height="240" draggable="false" srcset="" data-srcset="https://placehold.co/320x240 1x, https://placehold.co/640x480 2x">
</picture>
</div>
</a>
<div class="i-event__body d-flex flex-column gap-3 w-100">
<div class="i-event__top d-flex gap-1">
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500 --sm">
<span class="i-tag__title">Festival</span>
</span>
</div>
<h3 class="base-heading mb-0 u-fw-700 u-h5 i-event__heading">
<a class="i-event__heading-link u-clamp" href="#event" title="Výstava Třeboňsko - krajina dvojího nebe">Výstava Třeboňsko - krajina dvojího nebe</a>
</h3>
<footer class="i-event__footer d-flex gap-1 mt-auto">
<div class="i-event__metas d-flex flex-column gap-1 u-fz-sm">
<span class="i-meta d-flex gap-1 align-items-center" title="500 Kč">
<span class="i-meta__icon flex-shrink-0">
<span class="icon d-flex align-items-center justify-content-center --sm">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M0 80v149.5c0 17 6.7 33.3 18.7 45.3l176 176c25 25 65.5 25 90.5 0l133.5-133.5c25-25 25-65.5 0-90.5l-176-176c-12-12-28.3-18.7-45.3-18.7H48C21.5 32 0 53.5 0 80zm112 32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg> </span>
</span>
<span class="i-meta__title u-clamp u-clamp-1">500 Kč</span>
</span>
<span class="i-meta d-flex gap-1 align-items-center" title="05. 11. - 15.11. 2022">
<span class="i-meta__icon flex-shrink-0">
<span class="icon d-flex align-items-center justify-content-center --sm">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><g clip-path="url(#clip0_3547_98104)"><path fill="currentColor" d="M14.008 1.226c1.098 0 1.992.894 1.992 1.992v7.36L10.778 16H1.992A1.995 1.995 0 0 1 0 14.008V3.218C0 2.12.894 1.226 1.992 1.226h.583V0h1.532v1.226h7.786V0h1.532v1.226h.583Zm.46 8.276V6.069H1.532v7.939c0 .253.206.46.46.46h7.693v-2.974c0-1.098.894-1.992 1.992-1.992h2.79Zm0-4.966V3.218a.46.46 0 0 0-.46-.46h-.583v1.227h-1.532V2.759H4.107v1.226H2.575V2.759h-.583a.46.46 0 0 0-.46.46v1.317h12.935Zm-3.25 8.797 2.214-2.299h-1.754a.46.46 0 0 0-.46.46v1.84Z"/></g><defs><clipPath id="clip0_3547_98104"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg> </span>
</span>
<span class="i-meta__title u-clamp u-clamp-1">05. 11. - 15.11. 2022</span>
</span>
<span class="i-meta d-flex gap-1 align-items-center" title="České Budějovice">
<span class="i-meta__icon flex-shrink-0">
<span class="icon d-flex align-items-center justify-content-center --sm">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" fill="none" viewBox="0 0 25 24"><path fill="currentColor" d="m12.667 22-.581-.498c-.801-.67-7.794-6.71-7.794-11.127a8.375 8.375 0 0 1 16.75 0c0 4.417-6.994 10.456-7.791 11.13l-.584.495Zm0-18.19a6.571 6.571 0 0 0-6.564 6.565c0 2.775 4.302 7.208 6.564 9.237 2.261-2.03 6.563-6.466 6.563-9.237a6.571 6.571 0 0 0-6.563-6.564Z"/><path fill="currentColor" d="M12.666 13.694a3.32 3.32 0 1 1 0-6.64 3.32 3.32 0 0 1 0 6.64Zm0-4.98a1.66 1.66 0 1 0 0 3.32 1.66 1.66 0 0 0 0-3.32Z"/></svg> </span>
</span>
<span class="i-meta__title u-clamp u-clamp-1">České Budějovice</span>
</span>
</div>
<div class="i-event__button flex-shrink-0 ms-auto mt-auto">
<a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --xs --icon-only" href='#event' title="Výstava Třeboňsko - krajina dvojího nebe">
<span class="btn__icon d-flex align-items-center justify-content-center">
<span class="icon d-flex align-items-center justify-content-center">
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg> </span>
</span>
</a>
</div>
</footer>
</div>
</article>
</div>
<div class="g-events__cell">
<article class="i-event d-flex gap-3 --inline">
<a href="#event" class="i-event__image-link d-block u-img-hover flex-shrink-0" title="SZŠ a VOŠ zdravotnická České Budějovice řádek druhý při delším názvu nějaké ak ...">
<div class="img u-posr overflow-hidden --cover --placeholder">
<picture>
<img src="" data-src="https://placehold.co/320x240" alt="SZŠ a VOŠ zdravotnická České Budějovice řádek druhý při delším názvu nějaké ak ..." width="320" height="240" draggable="false" srcset="" data-srcset="https://placehold.co/320x240 1x, https://placehold.co/640x480 2x">
</picture>
</div>
</a>
<div class="i-event__body d-flex flex-column gap-3 w-100">
<div class="i-event__top d-flex gap-1">
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500 --sm">
<span class="i-tag__title">Výstava</span>
</span>
</div>
<h3 class="base-heading mb-0 u-fw-700 u-h5 i-event__heading">
<a class="i-event__heading-link u-clamp" href="#event" title="SZŠ a VOŠ zdravotnická České Budějovice řádek druhý při delším názvu nějaké ak ...">SZŠ a VOŠ zdravotnická České Budějovice řádek druhý při delším názvu nějaké ak ...</a>
</h3>
<footer class="i-event__footer d-flex gap-1 mt-auto">
<div class="i-event__metas d-flex flex-column gap-1 u-fz-sm">
<span class="i-meta d-flex gap-1 align-items-center" title="1 500 Kč">
<span class="i-meta__icon flex-shrink-0">
<span class="icon d-flex align-items-center justify-content-center --sm">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M0 80v149.5c0 17 6.7 33.3 18.7 45.3l176 176c25 25 65.5 25 90.5 0l133.5-133.5c25-25 25-65.5 0-90.5l-176-176c-12-12-28.3-18.7-45.3-18.7H48C21.5 32 0 53.5 0 80zm112 32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg> </span>
</span>
<span class="i-meta__title u-clamp u-clamp-1">1 500 Kč</span>
</span>
<span class="i-meta d-flex gap-1 align-items-center" title="25. 9. 2023, 13:00">
<span class="i-meta__icon flex-shrink-0">
<span class="icon d-flex align-items-center justify-content-center --sm">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><g clip-path="url(#clip0_3547_98104)"><path fill="currentColor" d="M14.008 1.226c1.098 0 1.992.894 1.992 1.992v7.36L10.778 16H1.992A1.995 1.995 0 0 1 0 14.008V3.218C0 2.12.894 1.226 1.992 1.226h.583V0h1.532v1.226h7.786V0h1.532v1.226h.583Zm.46 8.276V6.069H1.532v7.939c0 .253.206.46.46.46h7.693v-2.974c0-1.098.894-1.992 1.992-1.992h2.79Zm0-4.966V3.218a.46.46 0 0 0-.46-.46h-.583v1.227h-1.532V2.759H4.107v1.226H2.575V2.759h-.583a.46.46 0 0 0-.46.46v1.317h12.935Zm-3.25 8.797 2.214-2.299h-1.754a.46.46 0 0 0-.46.46v1.84Z"/></g><defs><clipPath id="clip0_3547_98104"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg> </span>
</span>
<span class="i-meta__title u-clamp u-clamp-1">25. 9. 2023, 13:00</span>
</span>
<span class="i-meta d-flex gap-1 align-items-center" title="České Budějovice">
<span class="i-meta__icon flex-shrink-0">
<span class="icon d-flex align-items-center justify-content-center --sm">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" fill="none" viewBox="0 0 25 24"><path fill="currentColor" d="m12.667 22-.581-.498c-.801-.67-7.794-6.71-7.794-11.127a8.375 8.375 0 0 1 16.75 0c0 4.417-6.994 10.456-7.791 11.13l-.584.495Zm0-18.19a6.571 6.571 0 0 0-6.564 6.565c0 2.775 4.302 7.208 6.564 9.237 2.261-2.03 6.563-6.466 6.563-9.237a6.571 6.571 0 0 0-6.563-6.564Z"/><path fill="currentColor" d="M12.666 13.694a3.32 3.32 0 1 1 0-6.64 3.32 3.32 0 0 1 0 6.64Zm0-4.98a1.66 1.66 0 1 0 0 3.32 1.66 1.66 0 0 0 0-3.32Z"/></svg> </span>
</span>
<span class="i-meta__title u-clamp u-clamp-1">České Budějovice</span>
</span>
</div>
<div class="i-event__button flex-shrink-0 ms-auto mt-auto">
<a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --xs --icon-only" href='#event' title="SZŠ a VOŠ zdravotnická České Budějovice řádek druhý při delším názvu nějaké ak ...">
<span class="btn__icon d-flex align-items-center justify-content-center">
<span class="icon d-flex align-items-center justify-content-center">
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg> </span>
</span>
</a>
</div>
</footer>
</div>
</article>
</div>
<div class="g-events__cell">
<article class="i-event d-flex gap-3 --inline">
<a href="#event" class="i-event__image-link d-block u-img-hover flex-shrink-0" title="Výstava Třeboňsko - krajina dvojího nebe">
<div class="img u-posr overflow-hidden --cover --placeholder">
<picture>
<img src="" data-src="https://placehold.co/320x240" alt="Výstava Třeboňsko - krajina dvojího nebe" width="320" height="240" draggable="false" srcset="" data-srcset="https://placehold.co/320x240 1x, https://placehold.co/640x480 2x">
</picture>
</div>
</a>
<div class="i-event__body d-flex flex-column gap-3 w-100">
<div class="i-event__top d-flex gap-1">
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500 --sm">
<span class="i-tag__title">Hudba</span>
</span>
</div>
<h3 class="base-heading mb-0 u-fw-700 u-h5 i-event__heading">
<a class="i-event__heading-link u-clamp" href="#event" title="Výstava Třeboňsko - krajina dvojího nebe">Výstava Třeboňsko - krajina dvojího nebe</a>
</h3>
<footer class="i-event__footer d-flex gap-1 mt-auto">
<div class="i-event__metas d-flex flex-column gap-1 u-fz-sm">
<span class="i-meta d-flex gap-1 align-items-center" title="5 000 Kč">
<span class="i-meta__icon flex-shrink-0">
<span class="icon d-flex align-items-center justify-content-center --sm">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M0 80v149.5c0 17 6.7 33.3 18.7 45.3l176 176c25 25 65.5 25 90.5 0l133.5-133.5c25-25 25-65.5 0-90.5l-176-176c-12-12-28.3-18.7-45.3-18.7H48C21.5 32 0 53.5 0 80zm112 32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg> </span>
</span>
<span class="i-meta__title u-clamp u-clamp-1">5 000 Kč</span>
</span>
<span class="i-meta d-flex gap-1 align-items-center" title="05. 11. - 15.11. 2022">
<span class="i-meta__icon flex-shrink-0">
<span class="icon d-flex align-items-center justify-content-center --sm">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><g clip-path="url(#clip0_3547_98104)"><path fill="currentColor" d="M14.008 1.226c1.098 0 1.992.894 1.992 1.992v7.36L10.778 16H1.992A1.995 1.995 0 0 1 0 14.008V3.218C0 2.12.894 1.226 1.992 1.226h.583V0h1.532v1.226h7.786V0h1.532v1.226h.583Zm.46 8.276V6.069H1.532v7.939c0 .253.206.46.46.46h7.693v-2.974c0-1.098.894-1.992 1.992-1.992h2.79Zm0-4.966V3.218a.46.46 0 0 0-.46-.46h-.583v1.227h-1.532V2.759H4.107v1.226H2.575V2.759h-.583a.46.46 0 0 0-.46.46v1.317h12.935Zm-3.25 8.797 2.214-2.299h-1.754a.46.46 0 0 0-.46.46v1.84Z"/></g><defs><clipPath id="clip0_3547_98104"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg> </span>
</span>
<span class="i-meta__title u-clamp u-clamp-1">05. 11. - 15.11. 2022</span>
</span>
<span class="i-meta d-flex gap-1 align-items-center" title="České Budějovice, masté krámy 4433 u popelnic">
<span class="i-meta__icon flex-shrink-0">
<span class="icon d-flex align-items-center justify-content-center --sm">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" fill="none" viewBox="0 0 25 24"><path fill="currentColor" d="m12.667 22-.581-.498c-.801-.67-7.794-6.71-7.794-11.127a8.375 8.375 0 0 1 16.75 0c0 4.417-6.994 10.456-7.791 11.13l-.584.495Zm0-18.19a6.571 6.571 0 0 0-6.564 6.565c0 2.775 4.302 7.208 6.564 9.237 2.261-2.03 6.563-6.466 6.563-9.237a6.571 6.571 0 0 0-6.563-6.564Z"/><path fill="currentColor" d="M12.666 13.694a3.32 3.32 0 1 1 0-6.64 3.32 3.32 0 0 1 0 6.64Zm0-4.98a1.66 1.66 0 1 0 0 3.32 1.66 1.66 0 0 0 0-3.32Z"/></svg> </span>
</span>
<span class="i-meta__title u-clamp u-clamp-1">České Budějovice, masté krámy 4433 u popelnic</span>
</span>
</div>
<div class="i-event__button flex-shrink-0 ms-auto mt-auto">
<a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --xs --icon-only" href='#event' title="Výstava Třeboňsko - krajina dvojího nebe">
<span class="btn__icon d-flex align-items-center justify-content-center">
<span class="icon d-flex align-items-center justify-content-center">
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg> </span>
</span>
</a>
</div>
</footer>
</div>
</article>
</div>
<div class="g-events__cell">
<article class="i-event d-flex gap-3 --inline">
<a href="#event" class="i-event__image-link d-block u-img-hover flex-shrink-0" title="Festival vzdělání Český Krumlov">
<div class="img u-posr overflow-hidden --cover --placeholder">
<picture>
<img src="" data-src="https://placehold.co/320x240" alt="Festival vzdělání Český Krumlov" width="320" height="240" draggable="false" srcset="" data-srcset="https://placehold.co/320x240 1x, https://placehold.co/640x480 2x">
</picture>
</div>
</a>
<div class="i-event__body d-flex flex-column gap-3 w-100">
<div class="i-event__top d-flex gap-1">
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500 --sm">
<span class="i-tag__title">Koncert</span>
</span>
</div>
<h3 class="base-heading mb-0 u-fw-700 u-h5 i-event__heading">
<a class="i-event__heading-link u-clamp" href="#event" title="Festival vzdělání Český Krumlov">Festival vzdělání Český Krumlov</a>
</h3>
<footer class="i-event__footer d-flex gap-1 mt-auto">
<div class="i-event__metas d-flex flex-column gap-1 u-fz-sm">
<span class="i-meta d-flex gap-1 align-items-center" title="500 Kč">
<span class="i-meta__icon flex-shrink-0">
<span class="icon d-flex align-items-center justify-content-center --sm">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M0 80v149.5c0 17 6.7 33.3 18.7 45.3l176 176c25 25 65.5 25 90.5 0l133.5-133.5c25-25 25-65.5 0-90.5l-176-176c-12-12-28.3-18.7-45.3-18.7H48C21.5 32 0 53.5 0 80zm112 32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg> </span>
</span>
<span class="i-meta__title u-clamp u-clamp-1">500 Kč</span>
</span>
<span class="i-meta d-flex gap-1 align-items-center" title="05. 11. - 15.11. 2022">
<span class="i-meta__icon flex-shrink-0">
<span class="icon d-flex align-items-center justify-content-center --sm">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><g clip-path="url(#clip0_3547_98104)"><path fill="currentColor" d="M14.008 1.226c1.098 0 1.992.894 1.992 1.992v7.36L10.778 16H1.992A1.995 1.995 0 0 1 0 14.008V3.218C0 2.12.894 1.226 1.992 1.226h.583V0h1.532v1.226h7.786V0h1.532v1.226h.583Zm.46 8.276V6.069H1.532v7.939c0 .253.206.46.46.46h7.693v-2.974c0-1.098.894-1.992 1.992-1.992h2.79Zm0-4.966V3.218a.46.46 0 0 0-.46-.46h-.583v1.227h-1.532V2.759H4.107v1.226H2.575V2.759h-.583a.46.46 0 0 0-.46.46v1.317h12.935Zm-3.25 8.797 2.214-2.299h-1.754a.46.46 0 0 0-.46.46v1.84Z"/></g><defs><clipPath id="clip0_3547_98104"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg> </span>
</span>
<span class="i-meta__title u-clamp u-clamp-1">05. 11. - 15.11. 2022</span>
</span>
<span class="i-meta d-flex gap-1 align-items-center" title="České Budějovice">
<span class="i-meta__icon flex-shrink-0">
<span class="icon d-flex align-items-center justify-content-center --sm">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" fill="none" viewBox="0 0 25 24"><path fill="currentColor" d="m12.667 22-.581-.498c-.801-.67-7.794-6.71-7.794-11.127a8.375 8.375 0 0 1 16.75 0c0 4.417-6.994 10.456-7.791 11.13l-.584.495Zm0-18.19a6.571 6.571 0 0 0-6.564 6.565c0 2.775 4.302 7.208 6.564 9.237 2.261-2.03 6.563-6.466 6.563-9.237a6.571 6.571 0 0 0-6.563-6.564Z"/><path fill="currentColor" d="M12.666 13.694a3.32 3.32 0 1 1 0-6.64 3.32 3.32 0 0 1 0 6.64Zm0-4.98a1.66 1.66 0 1 0 0 3.32 1.66 1.66 0 0 0 0-3.32Z"/></svg> </span>
</span>
<span class="i-meta__title u-clamp u-clamp-1">České Budějovice</span>
</span>
</div>
<div class="i-event__button flex-shrink-0 ms-auto mt-auto">
<a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --xs --icon-only" href='#event' title="Festival vzdělání Český Krumlov">
<span class="btn__icon d-flex align-items-center justify-content-center">
<span class="icon d-flex align-items-center justify-content-center">
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg> </span>
</span>
</a>
</div>
</footer>
</div>
</article>
</div>
</div>
<div class="g-base flex-wrap --align-center --gap-md g-buttons">
<a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --full-width-mobile" href='#'>
<span class="btn__title u-z-index-1">
Vice akcí
</span>
</a>
</div>
</div>
</section>