卡片box-shadow与下方卡片重叠，z-index属性失效问题求助

我需要实现以下设计：

• 每个卡片应用样式 box-shadow: 16px 32px 56px rgba(143, 174, 207, 0.25);
• 所有卡片放置在带有 row 和 row-(n) 类的行容器中

目前效果接近预期，但存在问题：上方卡片的box-shadow与下方卡片发生重叠。我尝试为所有卡片添加 position:relative 属性，并按顺序设置z-index，但问题仍未解决。

HTML结构 #

<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>
</section>

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;
}

内容的提问来源于stack exchange，提问作者Gazdag Balazs