单列中的文本和图像对齐

Question

我正在尝试用flex实现类似于这张图的形状，但是所有元素都没有对齐并且距离与图片相同，我不知道我的实现是整体错误还是我只是做了一部分是错误的。我该如何解决这个问题？ 我使用了 12 列系统并在一列中定义了这张卡，因此所有内容都应该垂直并排并具有适当的间距。

:root {
   --font-secondary: "Katibeh", sans-serif;
   --spacing: 4px;  
   --color-shape-ellipse: #bbdac7;
}

.h-full {
  height: 100%;
}

.h-1\/2 {
  height: 50%;
}

.card {
  border-radius: 30px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
}

.card--frameless {
  justify-content: space-around;
  align-items: center;
}

.card.card--frameless .card__content {
  font-family: var(--font-secondary);
  line-height: normal;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.card--frameless .card__content h1 {
  font-size: calc(var(--spacing) * 10);
  letter-spacing: calc(var(--spacing) * 4);
  transform: rotate(-90deg);
  background: linear-gradient(91deg, #a1a1a1 0.68%, #8dd2a8 99.21%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.card--frameless .shapes {
  display: flex;
  flex-direction: column;
}

.card--frameless .shapes p {
  color: var(--color-shape-ellipse);
  font-size: calc(var(--spacing) * 15);
  font-family: var(--font-secondary);
}

.card--frameless .ellipses {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.card--frameless .ellipses .circle {
  width: 15px;
  height: 15px;
  padding: 10px 0;
}

.card--frameless .ellipses .line {
  height: 100px;
}

 <div class="card card--frameless h-full">
            <div class="card__content h-1/2">
              <h1>Recipes</h1>
            </div>
            <div class="shapes h-1/2">
              <p>01</p>

              <div class="ellipses">
                <img class="circle" src="https://www.svgrepo.com/show/221249/circle-oval.svg" alt="">
                <img class="circle" src="https://www.svgrepo.com/show/221249/circle-oval.svg" alt="">
                <img class="circle" src="https://www.svgrepo.com/show/221249/circle-oval.svg" alt="">
                <img class="circle" src="https://www.svgrepo.com/show/221249/circle-oval.svg" alt="">
                <img class="circle" src="https://www.svgrepo.com/show/221249/circle-oval.svg" alt="">
                <img class="line" src="https://www.svgrepo.com/show/533601/arrow-narrow-down.svg" alt="line">
              </div>
            </div>
          </div>

Answer 1

:root {
   --font-secondary: "Katibeh", sans-serif;
   --spacing: 4px;  
   --color-shape-ellipse: #bbdac7;
}

* {
  margin: 0;
  padding: 0;
}

.h-full {
  height: 100%;
}

.h-1\/2 {
  height: 100%;
}

.card {
  border-radius: 30px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
}

.card--frameless {
  justify-content: space-around;
  align-items: center;
}

.card.card--frameless .card__content {
  font-family: var(--font-secondary);
  line-height: normal;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-block: 8rem;
}

.card__content {
  transform: rotate(-90deg);
}

.card--frameless .card__content h1 {
  font-size: calc(var(--spacing) * 10);
  letter-spacing: calc(var(--spacing) * 4);
  background: linear-gradient(91deg, #a1a1a1 0.68%, #8dd2a8 99.21%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.card--frameless .shapes {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.card--frameless .shapes p {
  color: var(--color-shape-ellipse);
  font-size: calc(var(--spacing) * 15);
  font-family: var(--font-secondary);
  margin: 0;
}

.card--frameless .ellipses {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.card--frameless .ellipses .circle {
  width: 15px;
  height: 15px;
  padding: 10px 0;
}

.card--frameless .ellipses .line {
  height: 100px;
}

<div class="card card--frameless h-full">
            <div class="card__content h-1/2">
              <h1>Recipes</h1>
            </div>
            <div class="shapes h-1/2">
              <p>01</p>

              <div class="ellipses">
                <img class="circle" src="https://www.svgrepo.com/show/221249/circle-oval.svg" alt="">
                <img class="circle" src="https://www.svgrepo.com/show/221249/circle-oval.svg" alt="">
                <img class="circle" src="https://www.svgrepo.com/show/221249/circle-oval.svg" alt="">
                <img class="circle" src="https://www.svgrepo.com/show/221249/circle-oval.svg" alt="">
                <img class="circle" src="https://www.svgrepo.com/show/221249/circle-oval.svg" alt="">
                <img class="line" src="https://www.svgrepo.com/show/533601/arrow-narrow-down.svg" alt="line">
              </div>
            </div>
          </div>