Put all the items in the same cells

header {
  display: grid;
  grid-template-areas: "heros";

  > * {
    grid-area: hero;
  }
}

Hero 1 summary

object-fit used to control img size
align-items: center used to vertically align the grid children

Hero 2 summary

created a color screen over the img by defining background-color of the header with rgba and adding z-index: -1 to the img to slide it behind the header
used pseudo-elements for additional design flair, and positioned them separately from the parent grid definition with place-self

Hero 3 summary

use of a wrapper to provide a secondary grid layout for content versus header design elements
creation of auto-width columns with grid-template-columns
Leveraging vmin to minimize padding on smaller viewports and increase it for larger viewports