:root {
    /* Single source of truth for the notch shape.
       Reused anywhere a "notched rectangle" is needed (see hero.css). */
    --left--notch-clip: polygon(
        7% 0,
        100% 0,
        100% 100%,
        7% 100%,
        7% 83%,
        0 73%,
        0 27%,
        7% 17%
    );

    /* For project__label vertical panels. */
    --notch-clip-top: polygon(
        0% 0%,
        0% 100%,
        100% 100%,
        100% 100%,
        78% 0%
    );

    --right--notch-clip: polygon(
        0 0,
        93% 0,
        93% 17%,
        100% 27%,
        100% 73%,
        93% 83%,
        93% 100%,
        0 100%
    );

    /* Depth of the tab that sticks down below the panel. */
--bottom-notch-depth: 24px;

--bottom--notch-clip: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--bottom-notch-depth)),
    61% calc(100% - var(--bottom-notch-depth)),
    58% 100%,
    42% 100%,
    39% calc(100% - var(--bottom-notch-depth)),
    0 calc(100% - var(--bottom-notch-depth))
);
}
 
.notched__retangle {
    width: 300px;
    height: 170px;
    background: #151515;
    clip-path: var(--notch-clip);
}