<div class="gl-ar">
  <div class="gl-ar-tile" style="grid-row: span 2"><strong>2:1</strong><em>span 2 rows</em></div>
  <div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div>
  <div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div>
  <div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div>
  <div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div>
  <div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div>
  <div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div>
  <div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div>
  <div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div>
  <div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div>
  <div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div>
</div>

.gl-ar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  width: 100%;
  min-height: 480px;
  padding: 22px;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(192,38,211,0.16), transparent 60%),
    #1a0820;
  font-family: 'Inter', system-ui, sans-serif;
  color: #f5d0fe;
  box-sizing: border-box;
  align-content: start;
}
.gl-ar-tile {
  aspect-ratio: 1;
  background: linear-gradient(160deg, rgba(192,38,211,0.18), rgba(126,34,206,0.06));
  border: 1px solid rgba(192,38,211,0.32);
  border-radius: 12px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
}
.gl-ar-tile[style*="span 2"] { aspect-ratio: 1 / 2; }
.gl-ar-tile strong { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.gl-ar-tile em {
  font-style: normal;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; color: #c026d3;
}
.gl-ar-tile:nth-child(3n+1) { background: linear-gradient(160deg, #c026d3, #a21caf); border: 0; }
.gl-ar-tile:nth-child(3n+1) em { color: rgba(255,255,255,0.7); }
.gl-ar-tile:nth-child(5n+2) { background: linear-gradient(160deg, #a21caf, #86198f); border: 0; }
.gl-ar-tile:nth-child(5n+2) em { color: rgba(255,255,255,0.7); }