Have images align as it scales in a full bleed section

Site URL: https://apple-cobalt-rm97.squarespace.com/

Hi!

I am trying to have images full bleed in a grid (see images below) with copy below each image. I have somewhat achieved that however the larger image doesn't stay aligned to the bottom of the other images as it scales. The code I used is below. Does anybody have any ideas of how to fix this or a better idea of how to achieve the overall look in general? The images will be links to the programs. I am also having trouble with the text below needing a bit of padding on the left, mainly on the larger image and also making the leading tighter just on this section.

Thanks!

////// PROGRAMS HOME PAGE //////
// text no padding //
#block-yui_3_17_2_1_1621910892795_30376, #block-yui_3_17_2_1_1621910892795_25128, #block-yui_3_17_2_1_1621910892795_26488, #block-yui_3_17_2_1_1621910892795_29021, #block-yui_3_17_2_1_1621910892795_27755  {
background: #000000;
padding-bottom: 0px;
padding-left: 20px;
text-align: left;
}

// Image no padding //
#block-yui_3_17_2_1_1621910892795_10252, #block-yui_3_17_2_1_1621910892795_11420, #block-yui_3_17_2_1_1621910892795_16220, #block-yui_3_17_2_1_1621910892795_19896, #block-yui_3_17_2_1_1621910892795_22882   {
padding: 0px;
}

// Full Width Image Card Page Section //
section[data-section-id="60ac50915a700a0d77d5774d"] {
 overflow-x: hidden !important;
  overflow-y: hidden !important;
    .content-wrapper  {
      padding: 0px !important;
      margin: 0px auto;
      display: flex;
      display: contents;
    }
.sqs-layout .sqs-row .sqs-block {
  padding-bottom: 25px !important;
  padding-top: 8px !important;
}}