CSSでブログ記事一覧のようなレイアウトを作りたいが上端が上手くそろわない

実現したいこと

こちらのCSSでimgと記事名にあたるh3の上端が綺麗に揃うようにしたい

発生している問題・分からないこと

現在flexboxを用いて該当箇所の記事一覧を作っていますが、imgタグとh3タグの高さの合わせ方がわからず困っています。
画像のように両者の上端を綺麗にそろえたいのですが、揃いません。

該当のソースコード

現在のhtmlとcssのコードです。 <div class="title"> <h2>NEWS</h2> <button>MORE</button> </div> <article class="summer"> <img src="summer2023_01.jpg" alt="夏の風景写真を募集中"> <div class="article"> <h3><a>2023年度夏の絶景ポストカード制作スタート!夏景色の写真を大募集!</a></h3> <time datetime="2022-07-22">2022.07.22</time> <p>こんにちは、TABIPPOの小井詰です。 東急ハンズやLOFTにて販売されている、旅好きな方とつくってきたPAS-POLの夏の絶景ポストカード2023夏制作をスタートしました。 2023年度も今年同様、四季に合わせて募集をしていきます。年間を通して募集をするので、彩り豊かな四季折々の写真のご応募をお待ちしております。今回は夏の風景写真を募集いたします! 現在の予定では以下のスケジュールで募集を行い（変更の可能性あり）、夏以降募集の際にはまた、改めてお知らせをいたします。 写真募集年間スケジュール </p> </div> </article> CSS article{ display: flex; max-width: 846px; max-height: 261px; padding-bottom: 60px; margin-bottom: 60px; } article > img{ max-width: 322px; max-height: 181px; } div.article{ max-width: 463px; padding: 0 15px; } div.article > h3{ height: 61px; margin-bottom: 5px; }

試したこと・調べたこと

上記の詳細・結果

ネットでも調べたのですが、正しい調べ方がわからず縦並びレイアウトのものばかり出てきてしまい、あまり参考になりませんでした。
諸学者で至らぬ点が多く申し訳ないのですが、お力添えお願いいたします。

補足

特になし