<div class="gl-12">
  <div class="gl-12-c12"><strong>12</strong><em>span 12</em></div>
  <div class="gl-12-c6"><strong>6</strong><em>span 6</em></div>
  <div class="gl-12-c6"><strong>6</strong><em>span 6</em></div>
  <div class="gl-12-c4"><strong>4</strong><em>span 4</em></div>
  <div class="gl-12-c4"><strong>4</strong><em>span 4</em></div>
  <div class="gl-12-c4"><strong>4</strong><em>span 4</em></div>
  <div class="gl-12-c3"><strong>3</strong><em>span 3</em></div>
  <div class="gl-12-c3"><strong>3</strong><em>span 3</em></div>
  <div class="gl-12-c3"><strong>3</strong><em>span 3</em></div>
  <div class="gl-12-c3"><strong>3</strong><em>span 3</em></div>
  <div class="gl-12-c8"><strong>8</strong><em>span 8</em></div>
  <div class="gl-12-c4"><strong>4</strong><em>span 4</em></div>
</div>

.gl-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  min-height: 480px;
  padding: 22px;
  background:
    repeating-linear-gradient(90deg, transparent 0, transparent calc(100%/12 - 1px), rgba(245,158,11,0.06) calc(100%/12 - 1px), rgba(245,158,11,0.06) calc(100%/12)),
    #1a1206;
  font-family: 'Inter', system-ui, sans-serif;
  color: #fef3c7;
  box-sizing: border-box;
  align-content: start;
}
.gl-12 > div {
  background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(217,119,6,0.1));
  border: 1px solid rgba(245,158,11,0.32);
  border-radius: 10px;
  padding: 14px 10px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  min-height: 64px;
}
.gl-12 > div strong {
  font-size: 22px; font-weight: 800; color: #fef3c7;
  letter-spacing: -0.02em;
}
.gl-12 > div em {
  font-style: normal;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: #fbbf24;
  letter-spacing: 0.04em;
}
.gl-12-c12 { grid-column: span 12; background: linear-gradient(90deg, #f59e0b, #fbbf24) !important; }
.gl-12-c12 strong { color: #1a1206; }
.gl-12-c12 em { color: #1a1206; opacity: 0.6; }
.gl-12-c8  { grid-column: span 8; }
.gl-12-c6  { grid-column: span 6; }
.gl-12-c4  { grid-column: span 4; }
.gl-12-c3  { grid-column: span 3; }
@media (max-width: 720px) {
  .gl-12 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .gl-12-c12, .gl-12-c8, .gl-12-c6 { grid-column: span 6; }
  .gl-12-c4, .gl-12-c3 { grid-column: span 3; }
}