<div class="cards">
  <div>
    <img src="" alt="" />
    <h2>Title 1</h2>
    <p>Text 1</p>
  </div>
  <div>
    <img src="" alt="" />
    <h2>Title 2</h2>
    <p>Text 2</p>
  </div>
  <div>
    <img src="" alt="" />
    <h2>Title 3</h2>
    <p>Text 3</p>
  </div>
  <div>
    <img src="" alt="" />
    <h2>Title 4</h2>
    <p>Text 4</p>
  </div>
</div>

.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.cards > div:nth-child(2n) {
  transform: translateY(-40px);
}

/* Base styles */
.cards {
  max-width: 900px;
  padding-top: 40px;
  margin-inline: auto;
}

.cards > div {
  background-color: lightblue;
}

.cards > div:nth-child(2n) {
  background-color: darkmagenta;
}