Having issues with z-index in CSS

Question

I'm playing around with HTML and CSS to make myself a simple webpage and on using some styles I found online I ran into an issue with z-index!

I have the following code applied to a div which gives it a cool animated outline:

.column_1 {
    padding: 1rem;
    padding-bottom: 2rem;
    margin-top: 5rem;
    width: 15%;

    --borderWidth: 3px;
    background: white;
    position: relative;
    border-radius: var(--borderWidth);
}
.column_1:after {
    content: '';
    position: absolute;
    top: calc(-1 * var(--borderWidth));
    left: calc(-1 * var(--borderWidth));
    height: calc(100% + var(--borderWidth) * 2);
    width: calc(100% + var(--borderWidth) * 2);
    background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
    border-radius: calc(2 * var(--borderWidth));
    z-index: -1;
    animation: animatedgradient 3s ease alternate infinite;
    background-size: 300% 300%;
}

pic1

I noticed .column_1:after has a z-index of -1 whereas .column_1 does not have one defined. I am led to believe that since it is not defined, it will default to auto which I believe is 0, but when I manually set it to 0 I get this issue:

.column_1 {
    padding: 1rem;
    padding-bottom: 2rem;
    margin-top: 5rem;
    width: 15%;

    --borderWidth: 3px;
    background: white;
    position: relative;
    border-radius: var(--borderWidth);
    z-index: 0;
}
.column_1:after {
    content: '';
    position: absolute;
    top: calc(-1 * var(--borderWidth));
    left: calc(-1 * var(--borderWidth));
    height: calc(100% + var(--borderWidth) * 2);
    width: calc(100% + var(--borderWidth) * 2);
    background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
    border-radius: calc(2 * var(--borderWidth));
    z-index: -1;
    animation: animatedgradient 3s ease alternate infinite;
    background-size: 300% 300%;
}

pic2

I can see what the styling is doing, it's colouring the div's :after and placing it behind the div via z-index which is coloured white in order to create a border appearance, so why does manually editing the div's z-index to 0 when it defaults as auto, (which should be 0), break it?

Thanks for reading!