3つのカードの高さを揃えるため、時間の上の余白を調節したい。

実現したいこと

1.下記写真のように、3つのカードの高さを揃えるために、日付の上に余白をつけたい。
2. 写真のアスペクト比を高さ260/横389で維持したい。

↓見本（2枚）

前提

1.日付にmargin-top: auto;を使用したが、効かなかった。
2. 写真のアスペクト比を維持するために.blog-card_thumb &:beforeに
padding-top :calc((260/389)*100%)で設定したが、
写真の上に余白ができてしまった。

発生している問題・エラーメッセージ

現状は以下の写真です。
初歩的でお恥ずかしいですが、宜しくお願い致します。

該当のソースコード

SASS

1/* blog2------------------------------------------------------ */3.blog-card {4 box-shadow: 0px 3px 6px #00000029;5 display: flex;6 flex-direction: column;7 margin-bottom: 20px;8 background: #fff;9}10.blog-card_thumb {11 position: relative;12 overflow: hidden;13 order: -1;14 &:before {15 content: "";16 display: block;17 }18 >img {19 position: absolute;20 left: 0;21 top: 0;22 width: 100%;23 height: 100%;24 max-width: none;25 object-fit: cover;26 transition: 0.5s;27 }28}29.card-body {30 padding: 15px 30px 15px 15px; 31 span{32 margin-top: auto;33 font-size: clamp(14px,2.8vw,16px);34 text-align: right;35 }36}37.card-body_text {38 font-size: clamp(14px,2.8vw,18px);39 line-height: 1.5;40 text-align: left;41}42/* blog--col243------------------------------------------------------ */44.blog-cards {45 display: flex;46 flex-direction: column;47 margin-bottom: -20px;48}49@include small {50 .cards--col3 {51 flex-direction: row;52 justify-content: space-between;53 flex-wrap: wrap;54 }55 .blog-card {56 width: calc((100% - 30px)/2);57 }58 59}60 61/* blog--col362------------------------------------------------------ */63 64@include medium {65 .blog-card {66 width: calc((100% - 60px)/3);67 }68}

HTML

1<section class="blog _bg"> 2 <div class="section-inner"> 3 <h2 class="section-ttl"> 4 <span class="section-ttl_main">ブログ</span><!-- /.section-ttl_main --> 5 <span class="section-ttl_sub">Blog</span><!-- /.section-ttl_sub --> 6 </h2><!-- /.section-ttl --> 7 <div class="blog-cards cards--col3"> 8 <div class="blog-card"> 9 <div class="card-body"> 10 <p class="card-body_text">サイトをリニューアルオープンしました。</p><!-- /.card-body_text --> 11 <span><time datetime="2020.01.23">2020-01-23</time></span><!-- /.datetime --> 12 </div><!-- /.card-body --> 13 <div class="blog-card_thumb"> 14 <figure><img src="img/austin-distel-wawEfYdpkag-unsplash.png" alt=""></figure> 15 </div><!-- /.blog-card_thumb --> 16 </div><!-- /.blog-card --> 17 <div class="blog-card"> 18 <div class="card-body"> 19 <p class="card-body_text">WebサイトでSEO内部施策に適したコー ディングでどれぐらいサイトが早くなるの か検証してみました</p> 20 <!-- /.card-body_text --> 21 <span><time datetime="2020.01.24">2020-01-24</time></span><!-- /.datetime --> 22 </div><!-- /.card-body --> 23 <div class="blog-card_thumb"> 24 <figure><img src="img/dylan-gillis-KdeqA3aTnBY-unsplash.png" alt=""></figure> 25 </div><!-- /.blog-card_thumb --> 26 </div><!-- /.blog-card --> 27 <div class="blog-card"> 28 <div class="card-body"> 29 <p class="card-body_text">ユアコーディングではデザイナーの方を 広く募集しています。</p><!-- /.card-body_text --> 30 <span><time datetime="2020.01.25">2020-01-25</time></span><!-- /.datetime --> 31 </div><!-- /.card-body --> 32 <div class="blog-card_thumb"> 33 <figure><img src="img/brooke-cagle-g1Kr4Ozfoac-unsplash.png" alt=""></figure> 34 </div><!-- /.blog-card_thumb --> 35 </div><!-- /.blog-card --> 36 </div><!-- /.blog-cards cards--col3 --> 37 </div><!-- /.blog-inner --> 38 39 </section><!-- /.blog -->

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。