.cards-wrap{
  display: block;
  width: 100%;
  display: flex;
  justify-content: space-between;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.left{
  flex: 0  0 50%;
}
.card-left{
  width: 100%;
  position: sticky;
  /* js param */
  top: 100px;
}
.cards{
  display: grid;
  /* 5 = cards-item */
  grid-template-rows: repeat(5, 1fr);
  gap: 32px;
  flex: 0  0 40%;
}
.cards-item{
 position: sticky;
    top: 100px;
    transform-origin: top center;
    justify-content: center;
    align-items: center;
    transition: 0.1s all;
   
}

/************************************* 767px *************************************/
@media only screen and (max-width: 980px) {
.cards-wrap{
flex-direction: column;
}
.left{
  flex: 0  0 100%;
}
.cards{
  flex: 0  0 100%;
}
}