---

{ box-sizing: border-box; margin: 0; padding: 0; }
body { background-color: #eef2f5; /* Светло-голубой фон */ font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 40px 20px; }
.container { width: 100%; max-width: 800px; display: flex; flex-direction: column; gap: 40px; /* Расстояние между секциями flex и grid */ }
/* Стили заголовков (flex / grid) */ .section { display: flex; flex-direction: column; gap: 10px; }
h2 { font-size: 24px; text-transform: uppercase; letter-spacing: 2px; color: #333; font-weight: bold; }
/* --- СТИЛИ КАРТОЧЕК (общие) --- / .box { border: 3px solid #000; background-color: #fff; display: flex; justify-content: center; align-items: center; font-size: 16px; font-weight: bold; color: #333; border-radius: 4px; / Легкое скругление для вида карточки / box-shadow: 2px 2px 0px rgba(0,0,0,0.1); / Легкая тень */ }
/* --- ВЕРХНИЙ БЛОК (FLEX) --- / .top-block { display: flex; flex-wrap: wrap; / Позволяет элементам переноситься / gap: 20px; / Отступы между карточками */ padding: 20px; border: 3px solid #000; background-color: #fafafa; }
.top-block .box { /* 4 карточки в ряд: (100% - 3 отступа по 20px) / 4 */ flex: 0 0 calc(25% - 15px); height: 140px; }
/* --- НИЖНИЙ БЛОК (GRID) --- / .bottom-block { display: grid; grid-template-columns: repeat(12, 1fr); / Сетка из 12 колонок / gap: 15px 20px; / 15px - между строками, 20px - между колонками */ padding: 20px; border: 3px solid #000; background-color: #fafafa; }
/* Ряд 1: 4 элемента по 3 колонки (3*4=12) */ .item-r1 { grid-column: span 3; height: 140px; }
/* Ряд 2: 3 + 6 + 3 = 12 */ .item-r2-small { grid-column: span 3; height: 50px; } .item-r2-wide { grid-column: span 6; height: 50px; }
/* Ряд 3: 6 + 4 + 2 = 12 / .item-r3-wide1 { grid-column: span 6; height: 60px; } .item-r3-wide2 { grid-column: span 4; height: 60px; } .item-r3-thin { grid-column: span 2; height: 80px; / Сделал чуть выше, как на исходной картинке */ }