如何用CSS Flex实现卡片内图片底部对齐？

我是编程新手（感谢您的耐心解答！），正在完成训练营的作品集项目。我希望在卡片顶部显示标题和文本，图片在下方对齐。我们使用CSS Flex布局，目前因卡片间文本长度不同，导致图片错位，以下是截图：

请问如何保持标题+文本在顶部，同时让图片对齐到卡片底部？

当前代码 #

CSS #

.card-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin: auto auto 60px auto;
  max-width: 100vw;
  /* 1000px; */
}

.card {
  background-color: #f2f2f2;
  width: 40%;
  margin: 20px;
}

.card a:hover {
  text-decoration: none;
}

.card-copy {
  padding: 0 20px 20px 20px;
}

HTML #

<section>

  <h2 class="center">Apparel Design</h2>

  <div class="card-container">
    <!--Card 1-->
    <div class="card">
      <a href="">
        <div class="card-copy">
          <h3 class="margin-bottom_five">Design Process</h3>
          <p class="margin-top_zero">Copy here about my design process overview</p>

        </div>
        <img src="https://via.placeholder.com/400">

      </a>
    </div>

    <!--Card 2-->
    <div class="card">
      <a href="">
        <div class="card-copy">
          <h3 class="margin-bottom_five">Professional Work</h3>
          <p class="margin-top_zero">Copy here about my most recent professional work</p>

        </div>
        <img src="https://via.placeholder.com/400">

      </a>
    </div>

    <!--Card 3-->
    <div class="card">
      <a href="">
        <div class="card-copy">
          <h3 class="margin-bottom_five">Exploratory Projects</h3>
          <p class="margin-top_zero">Copy here about my recent stretch projects</p>

        </div>
        <img src="https://via.placeholder.com/400">

      </a>
    </div>
  </div>
</section>

只需对现有CSS做3处调整，就能实现标题文本固定在顶部、图片对齐到卡片底部的效果：

1. 让.card成为垂直方向的flex容器，确保所有卡片高度统一
2. 让卡片内的链接也成为垂直flex容器，并占满卡片的可用空间
3. 给文本区域.card-copy设置自动底部外边距，把图片挤到最下方

修改后的CSS代码：

.card-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin: auto auto 60px auto;
  max-width: 100vw;
  /* 1000px; */
}

.card {
  background-color: #f2f2f2;
  width: 40%;
  margin: 20px;
  /* 新增：卡片设为垂直flex容器 */
  display: flex;
  flex-direction: column;
}

.card a {
  /* 新增：链接设为垂直flex容器，占满卡片空间 */
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card a:hover {
  text-decoration: none;
}

.card-copy {
  padding: 0 20px 20px 20px;
  /* 新增：自动占据上方空间，将图片推到底部 */
  margin-bottom: auto;
}

调整后，无论卡片内文本长度差异多大，图片都会固定在卡片底部，标题和文本始终保持在顶部位置。

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