box-shadow overlapping cards below them, z-index not working

So this is the design, that im trying to achive:

• Every card has a box-shadow like this:

box-shadow: 16px 32px 56px rgba(143, 174, 207, 0.25);

Here is the CSS for each card:

.card{
    width: 365px;
    padding: 32px;
    box-shadow: 16px 32px 56px rgba(143, 174, 207, 0.25);
    border-radius: 16px;
    position: relative;
}

• They are placed inside a row each row have a class of row and row-(n)

**This is what i've been able to make so far: ** I'd say its pretty close but it's ain't right... The box-shadow of the cards top overlap with the cards below them.

Here is the HTML structure of this whole section

And i also uploaded it to codePen

https://codepen.io/theCodeDesigner/pen/wvORXdP

      <section class="limitations">
        <div class="row-1 row">

          <div class="limitation-text">
            <h2 class="u-heading-l">Limitations of BMI</h2>
            <p class="u-body-m">
              Although BMI is often a practical indicator of healthy weight, it is not suited for
              every person. Specific groups should carefully consider their BMI outcomes, and in
              certain cases, the measurement may not be beneficial to use.
            </p>
          </div>

          <div class="card card-1">
            <div>
              <img src="./assets/images/icon-gender.svg" alt="">
              <h3 class="u-heading-s">Gender</h3>
            </div>
            <p class="u-body-m">
              The development and body fat composition of girls and boys vary with age. Consequently,
              a child's age and gender are considered when evaluating their BMI.
            </p>
          </div>
        </div>
       
        <div class="row-2 row">
          <div class="card card-2">
            <div>
              <img src="./assets/images/icon-age.svg" alt="">
              <h3 class="u-heading-s">Age</h3>
            </div>
            <p class="u-body-m">
              In aging individuals, increased body fat and muscle loss may cause BMI to underestimate
              body fat content.
            </p>
          </div>
          <div class="card card-3">
            <div>
              <img src="./assets/images/icon-muscle.svg" alt="">
              <h3 class="u-heading-s">Muscle</h3>
            </div>
            <p class="u-body-m">
              BMI may misclassify muscular individuals as overweight or obese, as it doesn't
              differentiate muscle from fat.
            </p>
          </div>
        </div>
        <div class="row-3 row">
          <div class="card">
            <div>
              <img src="./assets/images/icon-pregnancy.svg" alt="">
              <h3 class="u-heading-s">Pregnancy</h3>
            </div>
            <p class="u-body-m">
              Expectant mothers experience weight gain due to their growing baby. Maintaining a
              healthy pre-pregnancy BMI is advisable to minimise health risks for both mother
              and child.
            </p>
          </div>
          <div class="card">
            <div>
              <img src="./assets/images/icon-race.svg" alt="">
              <h3 class="u-heading-s">Race</h3>
            </div>
            <p class="u-body-m">
              Certain health concerns may affect individuals of some Black and Asian origins at
              lower BMIs than others. To learn more, it is advised to discuss this with your
              GP or practice nurse.
            </p>
          </div>
            </div>
        </div>
      </section>

And here is the CSS

.limitations{
    max-width: 1160px;
    margin: 0 auto;
    margin-bottom: 100px;
}

.limitation-text{
    width: 564px;
   
}

.limitation-text h2{
    margin-bottom: 35px;
}



.card{
    width: 365px;
    padding: 32px;
    box-shadow: 16px 32px 56px rgba(143, 174, 207, 0.25);
    border-radius: 16px;
    position: relative;
}


.row{
    display: flex;
    gap: 32px;
}

.row-1{
    justify-content: space-between;
    margin-bottom: 32px;
    padding-right: 100px ;
}

.row-2{
    justify-content: end;
    margin-bottom: 24px ;
}

.row-3{
    justify-content: center;
    margin-bottom: 32px;
}

.card-1{
    z-index: 1;
    position: relative;
}

.card-2, .card-3{
    z-index: 2;
    position: relative;
}

.card > div{
    display: flex;
    align-items: center;
    gap: 17px;
    margin-bottom: 16px;
}

i tried to use z-index and it didn't work. Then i added position relative to all of the cards. And a z-index in ascending order but it didn't work i can provide the github repo link as well:

https://github.com/GazdagB/fm-bmi-calculator

I ran into a similar issue & setting a background color for the cards worked for me. Weirdly, I tried it in your codepen & it worked for row 2 but not row 3. Hope this helps.