<div class="grid">
  <div class="item">Element 1</div>
  <div class="item">Element 2</div>
  <div class="item">Element 3</div>
  <div class="item">Element 4</div>
  <div class="item">Element 5</div>
  <div class="item">Element 6</div>
  <div class="item">Element 7</div>
  <div class="item">Element 8</div>
  <div class="item">Element 9</div>
  <div class="item">Element 10</div>
  <div class="item">Element 11</div>
  <div class="item">Element 12</div>
  <div class="item">Element 13</div>
  <div class="item">Element 14</div>
  <div class="item">Element 15</div>
  <div class="item">Element 16</div>
  <div class="item">Element 17</div>
  <div class="item">Element 18</div>
  <div class="item">Element 19</div>
  <div class="item">Element 20</div>
  <div class="item">Element 21</div>
  <div class="item">Element 22</div>
  <div class="item">Element 23</div>
  <div class="item">Element 24</div>
  <div class="item">Element 25</div>
  <div class="item">Element 26</div>
  <div class="item">Element 27</div>
  <div class="item">Element 28</div>
  <div class="item">Element 29</div>
  <div class="item">Element 30</div>
  <div class="item">Element 31</div>
  <div class="item">Element 32</div>
  <div class="item">Element 33</div>
  <div class="item">Element 34</div>
  <div class="item">Element 35</div>
  <div class="item">Element 36</div>
  <div class="item">Element 37</div>
  <div class="item">Element 38</div>
  <div class="item">Element 39</div>
  <div class="item">Element 40</div>
  <div class="item">Element 41</div>
  <div class="item">Element 42</div>
  <div class="item">Element 43</div>
  <div class="item">Element 44</div>
  <div class="item">Element 45</div>
  <div class="item">Element 46</div>
  <div class="item">Element 47</div>
  <div class="item">Element 48</div>
  <div class="item">Element 49</div>
  <div class="item">Element 50</div>
</div>

@layer reset;

@property --grid-cols {
  syntax: "<integer>";
  inherits: false;
  initial-value: 12;
}

@property --grid-rows {
  syntax: "<integer>";
  inherits: false;
  initial-value: 12;
}

@property --span-cols {
  syntax: "<integer>";
  inherits: false;
  initial-value: 1;
}

@property --span-rows {
  syntax: "<integer>";
  inherits: false;
  initial-value: 1;
}

@layer reset {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
}

body {
  background-color: #121224;
}

:root {
  font-family: "Roboto", sans-serif;
}

.grid {
  display: grid;
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  block-size: 95cqb;
  inline-size: 90cqi;
  margin-inline: auto;
  padding: 3rem;
  gap: 1rem;

  .item {
    display: block;
    width: 100%;
    height: 100%;
    align-content: center;
    background-color: rgba(200, 200, 200, 0.125);
    color: white;
    border-radius: 12px;
    grid-column: span var(--span-cols);
    grid-row: span var(--span-rows);
    padding-block: 4rem;
    padding-inline: 2rem;

    &:nth-child(5n - 4), &:nth-child(5n - 4) ~ &:is(:nth-child(5n - 3), :nth-child(5n - 2)) {
      --span-cols: 4;
    }
    
    &:nth-child(5n - 1), &:nth-child(5n - 1) ~ &:nth-child(5n) {
      --span-cols: 6;
    }
  }
}