Pseudo element won't go behind it's parent in 3D

Question

I am currently trying out some 3D attributes in CSS, but I am having a problem. I am trying to create a stack of cards with some text and an image on them. To give the cards some thickness I decided to use a pseudo-element. The problem I am having is that the pseudo-element will show op behind the content of it's parent, but not it's background color. I am not sure that the problem is because of the 3D translations, but all the solutions I found seemed to work in 2D, but they do not work for me. Thanks in advance for anyone who knows what the problem is. HTML:

<section class="InfoStack section3">
        <main>
            <div class="stack">
                <div class="card">
                    <h1>This is a test card</h1>
                    <div class="info">
                        <p>This is the description of a test card that i am currently testing in this awesome test software with a special testing program</p>
                        <img src="Images/github.png" alt="">
                    </div>
                    <div class="progress"></div>
                </div>
            </div>
        </main>
    </section>

SASS:

* {
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
}
body {
    margin: 0;
    font-family: 'Lato', sans-serif;
    overflow: hidden scroll;
}
.InfoStack {
    .stack {
        float: right;
        margin: 120px 150px 0px 0px;
        .card {
            width: 60vh;
            height: 60vh;
            border-radius: 40px;
            background: #65dfc9;
            transform: rotateX(45deg) rotateZ(-45deg);
            transform-style: preserve-3d;
            position: relative;
            padding: 20px;
            &::after {
                content: "";
                width: 60vh;
                height: 60vh;
                border-radius: 40px;
                position: absolute;
                z-index: -1;
                background-color: #6cdbeb;
                transform: translateY(-65vh) translateX(-5vh);
            }
        }
    }
}
%section {
    position: absolute;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

$spaceamounts: (1,2,3,4);
@each $space in $spaceamounts {
    .section#{$space} {
        @extend %section;
        top: calc(100vh * (#{$space} - 1));
        z-index: $space;
    }
}

* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

body {
  margin: 0;
  font-family: "Lato", sans-serif;
  overflow: hidden scroll;
}

.InfoStack .stack {
  float: right;
  margin: 120px 150px 0px 0px;
}

.InfoStack .stack .card {
  width: 60vh;
  height: 60vh;
  border-radius: 40px;
  background: #65dfc9;
  transform: rotateX(45deg) rotateZ(-45deg);
  transform-style: preserve-3d;
  position: relative;
  padding: 20px;
}

.InfoStack .stack .card::after {
  content: "";
  width: 60vh;
  height: 60vh;
  border-radius: 40px;
  position: absolute;
  z-index: -1;
  background-color: #6cdbeb;
  transform: translateY(-65vh) translateX(-5vh);
}

.section4,
.section3,
.section2,
.section1 {
  position: absolute;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.section1 {
  top: calc(100vh * (1 - 1));
  z-index: 1;
}

.section2 {
  top: calc(100vh * (2 - 1));
  z-index: 2;
}

.section3 {
  top: calc(100vh * (3 - 1));
  z-index: 3;
}

.section4 {
  top: calc(100vh * (4 - 1));
  z-index: 4;
}

<section class="InfoStack section3">
  <main>
    <div class="stack">
      <div class="card">
        <h1>This is a test card</h1>
        <div class="info">
          <p>This is the description of a test card that i am currently testing in this awesome test software with a special testing program</p>
          <img src="Images/github.png" alt="">
        </div>
        <div class="progress"></div>
      </div>
    </div>
  </main>
</section>