CSS Grid have sections inside different columns start at the same (row) height

Question

I am stuck with a css-grid problem: I have a grid which contains of 1-3 columns, depending on the screen size.
Each column is made out of 1 block who contains 2 sections(red and blue border).
Both sections can vary in height.
Within each block, the height of section 1 should always be the same, which is defined by whatever block needs the most to fit its content.
The following section should always directly follow the first one.

What I thought may be the solution: Split each block into 2 rows. Each section takes up one row. Since each row within itself has a given height, the max height of section1 defines the start of row2. Therefore, if I tell section2 to start at the second row, everything should be aligned.
I tried that approach with grid-template-rows: 1fr auto and then giving each block grid-row: span 2 and each section a grid-row: span 1 but that did not work as expected.

Link to Codepen if you prefer that over the snippet

.item {
  height: 50px;
}

.item1 {
  background-color: blanchedalmond;
}

.item2 {
  background-color: cadetblue;
}

.item3 {
  background-color: coral;
}

.section1 {
  border: 5px solid red;
}

.section2 {
  border: 5px solid blue;
}

.block1 {
  border: 5px solid green;
}

.block2 {
  border: 5px solid orchid;
}

.block3 {
  border: 5px solid aqua;
}

.container {
  display: grid;
  max-width: 1410px;
  margin: auto;
  padding: 50px 3%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 2%;
  row-gap: 50px;
}


/* MEDIA QUERIES */


/* L */

@media (max-width: 1000px) {
  .container {
    grid-template-columns: 1fr 1fr;
  }
}


/* XS */

@media (max-width: 630px) {
  .container {
    grid-template-columns: 1fr;
  }
}

<div class="container">
  <div class="block1">
    <div class="section1">
      <div class="item item1">item 1</div>
      <div class="item item2">item 2</div>
      <div class="item item3">item 3</div>
    </div>
    <div class="section2">
      <div class="item item1">item 1</div>
      <div class="item item2">item 2</div>
    </div>
  </div>
  <div class="block2">
    <div class="section1">
      <div class="item item1">item1</div>
      <div class="item item2">item2</div>
    </div>
    <div class="section2">
      <div class="item item1">item1</div>
    </div>
  </div>
  <div class="block3">
    <div class="section1">
      <div class="item item1">item1</div>
    </div>
    <div class="section2">
      <div class="item item2">item1</div>
    </div>
  </div>
</div>