why doesn't z-index work properly with bootstrap and react

Question

I got this issue where the pseudo property "::before", won't stay behind element when added the property "z-index: -1".

App.js

import "./components/css-components/app.css"
import Columns from "./components/Columns";
//----------------------------------------
export default function App() {
  return (
    <div id = "app">
      <div className = "container">
        <div className = "row">
          <Columns card_class = "card main" sub_card_class = "main-sub-card"/>
          <Columns card_class = "card not-main work"/>
          <Columns card_class = "card not-main play"/>
          <Columns card_class = "card not-main study"/>
          
          <Columns card_class = "card not-main exercise"/>
          <Columns card_class = "card not-main social"/>
          <Columns card_class = "card not-main self-care"/>
        </div>
      </div>
    </div>
  );
}

Columns.js

import Cards from "./Cards"
//-----------------------------
export default function Columns(props) {
    return (
        <div className="columns col-sm-12 col-md-3">
            <Cards card_class={props.card_class} sub_card_class={props.sub_card_class} />
        </div>
    )
}

Cards.js

import "./css-components/cards.css"
//-----------------------------
export default function Cards(props) {
    return (
        <div className = {props.card_class}>
            <div className = {props.sub_card_class}></div>
        </div>
    )
}

cards.css

.card{
    position: relative;
    width: 50vw;
    height: 100px;
    background-color: hsl(235, 46%, 20%);
   /*border: 2px solid white;*/
}
.main{
    height: 150px;
}
.not-main{
    margin-top: 25px;
}
/*---------------- main card ----------------*/
/*---------------- sub card ----------------*/
.main-sub-card{
    position: absolute;
    width: 100%;
    height: 65%;
    border: 2px solid springgreen;
    border-radius: 5px;
    margin-top: 0px;
    background-color: hsl(246, 80%, 60%);
    z-index: 1;
}
.not-main::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    margin-top: -25px;
    background-color: red;
    z-index: -1;
}
/*---------------- sub card ----------------*/

**Discalimer: Displayed on 375px window, my objective only works of the last two columns/cards. Full screen, it completely does not work. My goal is to have all pseudo-elements (".not-main::before"), exist behind the main element (".not-main").

Github:https://github.com/OrlandoVSilva/time-tracker.git Vercel:https://time-tracker-qt9wldo7n-orlandovsilva.vercel.app/