I am trying to add clipped corners to the main element of my CSS, and I got them working. However, I use box-shadow for elements inside the main element, and large enough shadows near the corners clip outside the main element, only in the corners. This is an example of what I mean:

This is my CSS:

main {
    max-width: 610px;
    margin: auto;
    padding: 10px;
    /* border-top: 1px solid var(--bg-1);
    border-left: 1px solid var(--bg-1);
    border-bottom: 1px solid var(--bg-2);
    border-right: 1px solid var(--bg-2); */
    /* border-radius: 20px; */
    overflow: hidden;
    margin-bottom: 10px;
    position: relative;
}
main:before {
    --p: 1;
    --pixel: calc(var(--p) * 1px); /* don't change this */
    --s: calc(var(--pixel) * 20); /* size of the cut. you can change the number on the right of the asterisk for a deeper or shallower cut */
    content:"";
    position:absolute;
    inset:0;
    z-index: -1;
    background: linear-gradient(45deg,var(--bg-1),var(--bg-2));
    --g1:#000 var(--pixel),#0000 0 calc(100% - var(--pixel)),#000 0;
    --g2:#0000   calc(0.707*var(--s)), 
                #000  0 calc(0.707*var(--s) + var(--pixel)),
                #0000 0 calc(100% - 0.707*var(--s) - var(--pixel)),
                #000  0 calc(100% - 0.707*var(--s)),
                #0000 0;
}
main, main::before {
    -webkit-mask:
        linear-gradient(45deg ,var(--g2)),
        linear-gradient(-45deg,var(--g2)),
        linear-gradient(90deg ,var(--g1)) 50%/100% calc(100% - 2*var(--s)) no-repeat,
        linear-gradient(180deg,var(--g1)) 50%/calc(100% - 2*var(--s)) 100% no-repeat;
    mask:
        linear-gradient(45deg ,var(--g2)),
        linear-gradient(-45deg,var(--g2)),
        linear-gradient(90deg ,var(--g1)) 50%/100% calc(100% - 2*var(--s)) no-repeat,
        linear-gradient(180deg,var(--g1)) 50%/calc(100% - 2*var(--s)) 100% no-repeat;
}

Thank you!