Реализуем специальные динамические c сетки

Question

У меня есть массив дел, которые отображаются внутри портфеля. В настоящее время я застрял, пытаясь достичь этой сетки (пожалуйста, не обращайте внимания на тот факт, что мне пришлось почернить изображения):

Словами иметь два столбца, один из которых содержит одно изображение 100vh, а другой - два изображения, оба из которых имеют 50vh. Я пытался добиться этого эффекта, используя сеточную систему bootstraps, но я не представлял, как ее заполнить динамически:

<div class="container-fluid px-0">
  <div class="row m-0">
    <div class="col-lg-6 px-0 portfolio-item basic-enter-hidden" *ngFor="let case of cases; let i = index"
         [class.basic-enter]="enter">

      <div class="row m-0">
        <div class="col-12 px-0" [style.min-height.vh]="i === 0 ? 100 : 50">
          <app-single-portfolio-image-container [case]="case"></app-single-portfolio-image-container>
        </div>
        <div class="col-12 px-0" [style.min-height.vh]="i === 0 ? 0 : 50">
          <app-single-portfolio-image-container [case]="case"></app-single-portfolio-image-container>
        </div>
      </div>

    </div>
  </div>
</div>

Этот вид создает сетку, которую я хочу, но она далека от динамической. c, поскольку:

1. для столбца с двумя изображениями, одно изображение отображается для обоих (очевидно, один и тот же объект передается обоим)
2. в случае более трех объектов в массиве cases, кроме первого столбца, отображаются только столбцы с двумя изображениями - как я могу повторить ту же сетку снова после ее первого повторения, и есть ли способ поочередно отразить ее?

Я создал стек стека для лучшего понимания текущего прогресса: https://stackblitz.com/edit/angular-pfo7jh