<div class="gl-ram">
  <div class="gl-ram-cell"><strong>Card 1</strong><em>auto-fit · minmax(220px, 1fr)</em></div>
  <div class="gl-ram-cell"><strong>Card 2</strong><em>auto-fit</em></div>
  <div class="gl-ram-cell"><strong>Card 3</strong><em>auto-fit</em></div>
  <div class="gl-ram-cell"><strong>Card 4</strong><em>auto-fit</em></div>
  <div class="gl-ram-cell"><strong>Card 5</strong><em>auto-fit</em></div>
  <div class="gl-ram-cell"><strong>Card 6</strong><em>auto-fit</em></div>
  <div class="gl-ram-cell"><strong>Card 7</strong><em>auto-fit</em></div>
  <div class="gl-ram-cell"><strong>Card 8</strong><em>auto-fit</em></div>
</div>

.gl-ram {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  width: 100%;
  min-height: 480px;
  padding: 22px;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(56,189,248,0.16), transparent 60%),
    #051324;
  font-family: 'Inter', system-ui, sans-serif;
  color: #e0f2fe;
  box-sizing: border-box;
  align-content: start;
}
.gl-ram-cell {
  background: linear-gradient(160deg, rgba(56,189,248,0.16), rgba(14,165,233,0.06));
  border: 1px solid rgba(56,189,248,0.28);
  border-radius: 12px;
  padding: 22px 18px;
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center;
  gap: 6px;
  min-height: 90px;
}
.gl-ram-cell strong { font-size: 16px; font-weight: 700; color: #fff; }
.gl-ram-cell em {
  font-style: normal;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; color: #38bdf8;
  letter-spacing: 0.02em;
}
.gl-ram-cell:nth-child(1) { background: linear-gradient(135deg, #0ea5e9, #38bdf8); border: 0; }
.gl-ram-cell:nth-child(1) strong { color: #051324; }
.gl-ram-cell:nth-child(1) em { color: #051324; opacity: 0.7; }