As per attached wireframe,
All title character length can be dynamic so it ca nme 50 char long or 150 char long and it is link so it will redirect to new page.
For Title 1 & Title 2 : Hieght of blue figcaption with title should depend on length of title char and title , name and date has to fit in blue background figcaption.
For Title 3 & Title 4: Hieght of blue figcaption with title should depend on length of title char and title and height of blue figCaption(title3 & title4) should be the same [login to view URL] Title 3 can be short and title 4 can be long or title 4 can be short/title 3 can be long but height of blue figcaption for title 3 and 4 should be same height.
And For responsive, all title with detail(name/date) should be fit in blue figcaption.
All images will be 1200x630px. so you have to maks the image. so it will not be stretch and will look good.
I will send you the code which you have to follow as its coding standard. You can add class/id for css/js but please dont change layout and it has to be responsive.
And all images with figCaption can have 2px border (#009fdb) you can see in attached wireframe.
I have attached [login to view URL] and expected.png.
Blue color : #009fdb
For dekstop
Title 1 and title 2 should be fit in figcaption
title 3 and title 4 should be smae (dynamically)
For mobile, it doesn't have to be the same in mobile, since they're stacked