<div class="c-offscreen js-offscreen u-normal-spacing" data-offscreen-gtm-category="Product detail" data-offscreen-id="offscreen-1">

    <ul class="c-action-list c-offscreen__toggle">
        <li class="c-action-list__item">
            <button class="c-action-list__action e-action js-offscreen__toggle" data-side="left" type="button">
                <svg class="e-icon u-delta" aria-hidden="true"><use xlink:href="#filters"></use></svg>
                <span>Filtrovat</span>
            </button>
        </li>
        <li class="c-action-list__item">
            <button class="c-action-list__action e-action js-offscreen__toggle" data-side="right" type="button">
                <svg class="e-icon u-delta" aria-hidden="true"><use xlink:href="#sort"></use></svg>
                <span>Seřadit</span>
            </button>
        </li>
    </ul>

    <p>Ipsum itaque fuga sed fugiat eligendi optio perspiciatis placeat quod maxime consequuntur sit doloribus aperiam enim, quo magni asperiores eaque illum blanditiis! Eum pariatur deserunt dignissimos debitis, cupiditate cumque deleniti.</p>

    <aside class="c-offscreen__pane js-offscreen__pane" data-side="left" data-offscreen-gtm-label="Filter">
        <header class="c-offscreen__header">
            <h3 class="c-offscreen__heading u-epsilon">
                <svg class="e-icon" aria-hidden="true"><use xlink:href="#filters"></use></svg>
                <span>Filtrovat</span>
            </h3>
            <button class="c-offscreen__close e-action js-offscreen__toggle" data-side="left" type="button">
                <svg class="e-icon e-icon--circle u-epsilon" aria-hidden="true"><use xlink:href="#cross"></use></svg>
                <span>Zavřít</span>
            </button>
        </header>
        <div class="c-offscreen__content js-offscreen__content u-half-spacing">…</div>
        <footer class="c-offscreen__footer">
            <button class="c-offscreen__submit js-offscreen__toggle e-button e-button--fill" data-side="left" type="button">
                Zobrazit
            </button>
        </footer>
    </aside>

    <section class="u-normal-spacing">

        <h3 class="e-heading u-delta">Lorem ipsum</h3>

        <p>Perferendis quo quibusdam quod, soluta facilis, incidunt. Nulla quo similique repudiandae odit mollitia earum voluptas, magni consectetur dolores esse et laborum dolore facilis dicta molestiae vero, nemo pariatur modi ducimus.</p>

        <aside class="c-offscreen__pane js-offscreen__pane" data-side="right" data-offscreen-gtm-label="Sort">
            <header class="c-offscreen__header">
                <h3 class="c-offscreen__heading u-epsilon">
                    <svg class="e-icon" aria-hidden="true"><use xlink:href="#filters"></use></svg>
                    <span>Seřadit</span>
                </h3>
                <button class="c-offscreen__close e-action js-offscreen__toggle" data-side="right" type="button">
                    <svg class="e-icon e-icon--circle u-epsilon" aria-hidden="true"><use xlink:href="#cross"></use></svg>
                    <span>Zavřít</span>
                </button>
            </header>
            <div class="c-offscreen__content js-offscreen__content u-half-spacing">…</div>
            <footer class="c-offscreen__footer">
                <button class="c-offscreen__submit js-offscreen__toggle e-button e-button--fill" data-side="right" type="button">
                    Zobrazit
                </button>
            </footer>
        </aside>

        <p>Modi adipisci nisi, eum debitis quasi reiciendis cum similique eligendi quos accusantium quas dicta omnis perspiciatis perferendis. Tempore aperiam doloribus, saepe laborum mollitia ut cupiditate vitae eos eaque. Molestiae, explicabo.</p>

    </section>

</div>