<article class="responsive-shape about-us">
    <header>
        <h1>O nás</h1>
    </header>
    <section>
        <div>
            <a href="/img/other/sluzby_index/Epinger2_symbol_.svg"><img src="" alt=""></a>
            
        </div>
    </section>
</article>

<script>
function adjustClipPath() {
    const shape = document.querySelector('.responsive-shape');
    const width = shape.offsetWidth; // Get the element's width
    const emUnit = width / 16; // Calculate `1em` in pixels (assuming 16px base)

    // Adjust the clip-path with dynamic X-coordinates in `em`
    const clipPath = `
    polygon(
        0em 93%, ${19 / 16}em 93%, ${27 / 16}em 106%, ${50 / 16}em 106%, 
        ${56 / 16}em 98%, ${76 / 16}em 98%, ${79 / 16}em 93%, ${100 / 16}em 93%, 
        ${100 / 16}em 7%, ${79 / 16}em 7%, ${73 / 16}em -6%, ${50 / 16}em -6%, 
        ${44 / 16}em 2%, ${24 / 16}em 2%, ${21 / 16}em 7%, 0em 7%
    )
    `;

    shape.style.clipPath = clipPath;
}

// Adjust clip-path on load and resize
window.addEventListener('load', adjustClipPath);
window.addEventListener('resize', adjustClipPath);
</script>