我想让我的卡有两个方面的正面/背面。事情很简单，但棘手的灵活布局。它甚至可以把这种逻辑上的灵活布局？我们如何管理？
这是我的代码片段codepen link。这是双面效果的示例，它看起来像codepen link

main {
  width: 80%;
  height: 100vh;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin: 30px auto;
  padding: 30px 0;
}

.single-box {
  flex-direction: column;
  align-self: center;
  width: 270px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .5);
  border-radius: 10px 10px 10px 10px;
  margin: 30px 0;
  overflow: hidden;
  /* max-height: 100%; */
}

.header-area.img1 {
  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSjNSVKfWJh2gqMd3ClC-pfA8MX9X34oOP8rX-psZvYcNrrZA2l1AGCP_mIG0MVZl6hj6A&usqp=CAU);
  object-fit: contain;
  width: 100%;
}

.header-area {
  background-size: cover;
  /* padding: 100px 30px; */
  height: 200px;
  background-position: center center;
  border-radius: 10px 10px 50% 0;
  /* box-shadow: 0 0 10px rgba(0, 0, 0, .5); */
  transform: scale(1);
  transition: all .3s;
  /* position: relative; */
  /* max-height: 100%; */
  /* overflow: hidden; */
}

.header-area.img1:hover {
  transform: scale(1.3);
  transition: all .5s;
  cursor: pointer;
}

.body-area {
  padding: 10px 15px;
  /* overflow: hidden; */
  z-index: 1;
  position: relative;
  background-color: white;
}

<main>
  <div class="single-box">
    <div class="header-area img1"></div>
    <div class="body-area">
      <h3>Banana</h3>

      <p>
        Lorem ipsum
      </p>
    </div>
  </div>

  <div class="single-box">
    <div class="header-area img1"></div>
    <div class="body-area">
      <h3>Banana</h3>

      <p>
        Lorem ipsum
      </p>
    </div>
  </div>

</main>