Чистая сетка флексбокса с повторяющимся нерегулярным рисунком

Question

Я пытаюсь создать адаптивную сетку, используя только Flexbox. Сетка нерегулярна, большинство полей занимают 25% экрана, а каждый 3-й и 9-й элемент занимает 50%. Поэтому полная сетка содержит 14 элементов до перезапуска шаблона.

Пока мой код выглядит так:

<ul class="grid-container">
  <li class="grid-item">1</li>
  <li class="grid-item">2</li>
  <li class="grid-item">3</li>
  <li class="grid-item">4</li>
  <li class="grid-item">5</li>
  <li class="grid-item">6</li>
  <li class="grid-item">7</li>
  <li class="grid-item">8</li>
  <li class="grid-item">9</li>
  <li class="grid-item">10</li>
  <li class="grid-item">11</li>
  <li class="grid-item">12</li>
  <li class="grid-item">13</li>
  <li class="grid-item">14</li>
  <li class="grid-item">15</li>
  <li class="grid-item">16</li>
  <li class="grid-item">17</li>
  <li class="grid-item">18</li>
  <li class="grid-item">19</li>
  <li class="grid-item">20</li>
  <li class="grid-item">21</li>
  <li class="grid-item">22</li>
  <li class="grid-item">23</li>
  <li class="grid-item">24</li>
  <li class="grid-item">25</li>
  <li class="grid-item">26</li>
  <li class="grid-item">27</li>
  <li class="grid-item">28</li>
</ul>

SASS:

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}

li {
  flex-grow: 1;
  height: 14.0625vw;
  min-width: 25%;
  box-sizing: border-box;
  background: teal;
  color: white;
  text-align: center;
  padding: 0.5rem;
  border: 0.5rem solid white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  &:nth-of-type(3), &:nth-of-type(9) {
    min-width: 50%;
  }
  @media screen and (max-width: 1024px) {
    height: 28.125vw;
    min-width: 50%;
    &:nth-of-type(3n) {
      min-width: 100%;
    }
  }
  @media screen and (max-width: 768px) {
    height: 56.25vw;
    min-width: 100%;
  }
}

Посмотри в действии: https://codepen.io/jakeherp/pen/OGvjJe

Как я могу заставить этот шаблон повторяться?