كيفية جعل الصور تظهر بأبعاد موحدة داخل حاويات في الصندوق المرن flexbox في css

اريد عمل ثلاث بوكسات كل واحد فيها صورة ثم يأتي الكلام اسفلها وضعت كل شي لكن الان المشكلة اريد جعلها تظهر في مستوى واحد وايضا جعل الصور كلها بنفس المقاس كيف افعلها؟

فيما يلي هيكلية HTML للعناصر المقصودة:

<section id="blocks">
   <div class="conten" style="flex:30%">
      <img src="pic/141.jpeg">
      <p>alboum to your wedding day, birthday, born baby, friends travel, graduation</p>
   </div>
   <div class="conten" style="flex:30%">
      <img src="pic/142.jpeg">
      <p>make it an physical or digital alboum, just as you like</p>
   </div>
   <div class="conten" style="flex:30%">
      <img src="pic/143.jpeg">
      <p>alboum to your wedding day, birthday, born baby, friends travel, graduation</p>
   </div>
</section>
                

وفيما يلي التنسيقات التي حاولت تطبيقها على العناصر:

#blocks
{
    margin-top: 20px;
    padding: 60px 120px;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-content: center;
    align-items: flex-start;
}
#blocks .conten
{
    text-align: center;
    margin-left: 15px;
    position: relative;
}

@media (max-width:1020px)
{
    #blocks
    {
        flex-direction: column;
    }
}

مرفق ملفات المشروع:

testProject.zip