Nesting
←You can put a flexbox into a flexbox into a flexbox into a flexbox. BUT the markup here is a nesty. Please consider CSS grid nesting.
<div class="flex gap_m">
<div class="span-half">
<div class="box bg-a">
<div class="flex gap_s">
<div class="span-half">
<div class="box bg-d">
<div class="flex gap_s">
<div class="span-half">
<div class="box bg-l"></div>
</div>
<div class="span-half">
<div class="box bg-l"></div>
</div>
</div>
</div>
</div>
<div class="span-half">
<div class="box bg-d">
<div class="flex gap_s">
<div class="span-half">
<div class="box bg-l"></div>
</div>
<div class="span-half">
<div class="box bg-l"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="span-half">
<div class="box bg-a">
<div class="flex gap_s">
<div class="span-half">
<div class="box bg-d">
<div class="flex gap_s">
<div class="span-half">
<div class="box bg-l"></div>
</div>
<div class="span-half">
<div class="box bg-l"></div>
</div>
</div>
</div>
</div>
<div class="span-half">
<div class="box bg-d">
<div class="flex gap_s">
<div class="span-half">
<div class="box bg-l"></div>
</div>
<div class="span-half">
<div class="box bg-l"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>