HTML in Flexbox

Zdravo,

imam povsem začetniški problem z uporabo Flexboxa (Bootstrapa še ne znam) in bi rad nasvet oz. primere iz dobre prakse. Na tem linku je povezava do moje kode.
Kaj bi rad naredil?

Celoten panel postavil na sredino, tako po višini, kot tudi po širini. Obsegalo naj bi 60% širine, na manjših napravah (mobitel) pa se to vidi v stolpcu. Slednje je ok.

Kako lahko pozicioniram elemente znotraj .card, da bodo imeli enako višino?

Kako naredim, da bodo vsi trije .card elementi imeli enako širino?

Kako lahko naredim, da bo .img, ki v originalu ni enako velik, tu enako velik?

Srednji .card ima v .descriptionTwo daljši tekst. Kako lahko uredim, da bo višina vedno enaka? Ali moram prilagajati širino? Verjetno ja.

Kako lahko določim enako širino pri < 480px (povsem spodaj v css pod @media)? Sedaj imajo različno.

Končna varianta naj bi bila tole - https://codepen.io/travisw/pen/EvbKwd?
Ali je še katera boljša praksa, da namesto teh borderjev uporabljam kaj drugega? Trenutno mi to precej pomaga, ker sem začetnik. Vem, da je v Chromu Developer Tools, vendar na tem JsFiddle ni najbolj posrečeno. Ali moraš enostavno za to dobiti občutek? Kaj je dobra praksa tega dela?

Ima morda kdo nasvet, kje lahko še najdem take osnovne primere in jih poskušam posnemati?

Hvala za vse odgovore. :)