<section class="gl-qq">
  <header class="gl-qq-head">
    <strong>Three children → 3-column row</strong>
    <span class="gl-qq-coord">:has(:nth-child(3):last-child)</span>
  </header>
  <div class="gl-qq-grid">
    <div><strong>1</strong><em>nth-child(1)</em></div>
    <div><strong>2</strong><em>nth-child(2)</em></div>
    <div><strong>3</strong><em>nth-child(3)</em></div>
  </div>
</section>

.gl-qq {
  display: flex; flex-direction: column;
  gap: 16px;
  width: 100%;
  min-height: 480px;
  padding: 22px;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(217,70,239,0.16), transparent 60%),
    #1a0820;
  font-family: 'Inter', system-ui, sans-serif;
  color: #fae8ff;
  box-sizing: border-box;
}
.gl-qq-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #d946ef, #a21caf);
  border-radius: 12px;
  color: #fff;
}
.gl-qq-head strong { font-size: 14px; font-weight: 700; }
.gl-qq-coord {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  background: rgba(26,8,32,0.4); color: #fff;
  padding: 4px 10px; border-radius: 6px;
}
.gl-qq-grid {
  display: grid; gap: 12px; flex: 1;
  grid-template-columns: 1fr;
}
/* Single child → hero */
.gl-qq-grid:has(> div:only-child) { grid-template-columns: 1fr; }
/* Two children → 50/50 */
.gl-qq-grid:has(> div:nth-child(2):last-child) { grid-template-columns: 1fr 1fr; }
/* Three children → three columns */
.gl-qq-grid:has(> div:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
/* Four+ children → 2×2 */
.gl-qq-grid:has(> div:nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
.gl-qq-grid > div {
  background: linear-gradient(160deg, rgba(217,70,239,0.14), rgba(126,34,206,0.06));
  border: 1px solid rgba(217,70,239,0.32);
  border-radius: 12px;
  padding: 22px 18px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  min-height: 120px;
}
.gl-qq-grid > div strong { font-size: 32px; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.gl-qq-grid > div em {
  font-style: normal;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; color: #d946ef;
}
.gl-qq-grid > div:nth-child(2) { background: linear-gradient(160deg, rgba(217,70,239,0.28), rgba(126,34,206,0.1)); }
.gl-qq-grid > div:nth-child(3) { background: linear-gradient(135deg, #d946ef, #a21caf); border: 0; }
.gl-qq-grid > div:nth-child(3) em { color: rgba(255,255,255,0.6); }
@media (max-width: 720px) {
  .gl-qq-grid:has(> div:nth-child(3):last-child) { grid-template-columns: 1fr; }
}