How to do the following layout?

Question

css

https://codepen.io/s24344/pen/KrwoGv
Guys, tell me please. How to do the following layout?
There is the following html structure (it is important to do exactly with this structure):

<ul class="cards__list">
  <li class="cards__item">
    <a class="cards__link" href="#">
      <div class="cards__link-wrapper">
        item 1
      </div>
    </a>
  </li>
  <li class="cards__item">
    <a class="cards__link" href="#">
      <div class="cards__link-wrapper">
        item 2
      </div>
    </a>
  </li>
  <li class="cards__item">
    <a class="cards__link" href="#">
      <div class="cards__link-wrapper">
        item 4
      </div>
    </a>
  </li>
  <li class="cards__item">
    <a class="cards__link" href="#">
      <div class="cards__link-wrapper">
        item 5
      </div>
    </a>
  </li>
  <li class="cards__item">
    <a class="cards__link" href="#">
      <div class="cards__link-wrapper">
        item 6
      </div>
    </a>
  </li>
  <li class="cards__item">
    <a class="cards__link" href="#">
      <div class="cards__link-wrapper">
        item 7
      </div>
    </a>
  </li>
  <li class="cards__item">
    <a class="cards__link" href="#">
      <div class="cards__link-wrapper">
        item 8
      </div>
    </a>
  </li>
  <li class="cards__item">
    <a class="cards__link" href="#">
      <div class="cards__link-wrapper">
        item 9
      </div>
    </a>
  </li>
  <li class="cards__item">
    <a class="cards__link" href="#">
      <div class="cards__link-wrapper">
        item 10
      </div>
    </a>
  </li>
</ul>

My task is to make it so that when adding, for example:

<li class="cards__item">
  <a class="cards__link" href="#">
    <div class="cards__link-wrapper">
      item 8
    </div>
  </a>
</li>
<li class="cards__item">
  <a class="cards__link" href="#">
    <div class="cards__link-wrapper">
      item 9
    </div>
  </a>
</li>
<li class="cards__item">
  <a class="cards__link" href="#">
    <div class="cards__link-wrapper">
      item 10
    </div>
  </a>
</li>

These cards had styles similar to the intermediate row on the layout.
And when adding, for example, the next three, the styles are the same as the first row on the layout.
I will be very grateful for your help.

Answer 1