---

<!-- ВЕРХНИЙ БЛОК (FLEX) -->
    <div class="section">
        <h2>flex</h2>
        <div class="top-block">
            <div class="box">lumen</div>
            <div class="box">lumen</div>
            <div class="box">lumen</div>
            <div class="box">lumen</div>
            <div class="box">lumen</div>
            <div class="box">lumen</div>
            <div class="box">lumen</div>
            <div class="box">lumen</div>
        </div>
    </div>

    <!-- НИЖНИЙ БЛОК (GRID) -->
    <div class="section">
        <h2>grid</h2>
        <div class="bottom-block">
            <!-- Ряд 1: 4 высоких карточки -->
            <div class="box item-r1">lumen</div>
            <div class="box item-r1">lumen</div>
            <div class="box item-r1">lumen</div>
            <div class="box item-r1">lumen</div>

            <!-- Ряд 2: маленькая, широкая, маленькая -->
            <div class="box item-r2-small">lumen</div>
            <div class="box item-r2-wide">lumen</div>
            <div class="box item-r2-small">lumen</div>

            <!-- Ряд 3: широкая, средняя, узкая -->
            <div class="box item-r3-wide1">lumen</div>
            <div class="box item-r3-wide2">lumen</div>
            <div class="box item-r3-thin">lumen</div>
        </div>
    </div>

</div>