CSS relative clip-path: path() not working (entire bg image not showing), where is the code issue?

Question

I am building a hero element that I'm trying to make each 'piece' link to a different page, and since there is a lot of overlapping have opted for clip-path instead of masking. Here is an image showing what I'm trying to accomplish, and below is the relevant code:

hero element visual, showing each piece of the element

HTML & CSS: (#htl1 = top left-most element in visual, #htl2 = 2nd top left-most element, same deal for the rest of the pieces)

<style>
    #hero {
        position: relative;
        display: block;
        height: 58vw;
    }

    #htl1 {
        width: 29vw;
        height: 29vw;
        top: 0;
        left: 0;
        background: url(htl1.jpg) no-repeat center center;
        background-size: cover;
        clip-path: path("M0,0 V1 L1,0 H0");
        z-index: 2;
        position: absolute;
    }

    #htl2 {
        width: 50vw;
        height: 35vw;
        top: 0;
        left: 0;
        background: url(htl2.jpg) no-repeat center center;
        background-size: cover;
        clip-path: path("M0,0.837 V1 H1 V0 H0.6 L0,0.837");
        z-index: 1;
        position: absolute;
    }
</style>

<section id="hero">
    <a href="#1" id="htl1" class="masked"></a>
    <a href="#2" id="htl2" class="masked"></a>
    <a href="#3" id="htr1" class="masked"></a>
    <a href="#4" id="htr2" class="masked"></a>
    <a href="#5" id="hbr1" class="masked"></a>
    <a href="#6" id="hbr2" class="masked"></a>
    <a href="#7" id="hbl1" class="masked"></a>
    <a href="#8" id="hbl2" class="masked"></a>
</section>

I've tried getting this to work a number of ways but something about how this clip-path process works is eluding me. At this point I'm wondering if this is even possible, but I may simply be missing something basic here as I'm relatively new to working with SVGs in this fashion (masking/clipping).

I used this relative clip-path converting tool to turn them from userSpaceOnUse to objectBoundingBox, as this needs to be responsive and always span the full width of the page: https://yoksel.github.io/relative-clip-path/

Previously, when it was set to an absolute clip-path (e.g. based on viewbox I think?) it did clip the image, but the sizing was wrong. I've also tried this with various clipPath implementations inside an SVG file, but didn't have any success their either. A CSS only solution (e.g. path is all within the clip-path property) would be ideal to keep things simple.

Thank you for your time & consideration.

added example:

#hero {
        position: relative;
        display: block;
        height: 58vw;
    }

    #htl1 {
        width: 29vw;
        height: 29vw;
        top: 0;
        left: 0;
        background: url(https://placehold.co/100) no-repeat center center;
        background-size: cover;
        clip-path: path("M0,0 V1 L1,0 H0");
        z-index: 2;
        position: absolute;
    }

    #htl2 {
        width: 50vw;
        height: 35vw;
        top: 0;
        left: 0;
        background: url(https://placehold.co/100) no-repeat center center;
        background-size: cover;
        clip-path: path("M0,0.837 V1 H1 V0 H0.6 L0,0.837");
        z-index: 1;
        position: absolute;
    }

<section id="hero">
    <a href="#1" id="htl1"></a>
    <a href="#2" id="htl2"></a>
</section>