<div class="gl-as">
  <div class="gl-as-hero"><strong>Hero</strong><span class="gl-as-coord">1 / 1 / 3 / 4</span></div>
  <div class="gl-as-tall"><strong>Tall</strong><span class="gl-as-coord">1 / 4 / 4 / 5</span></div>
  <div class="gl-as-t1"><strong>Thumb 1</strong><span class="gl-as-coord">3 / 1 / 4 / 2</span></div>
  <div class="gl-as-t2"><strong>Thumb 2</strong><span class="gl-as-coord">3 / 2 / 4 / 3</span></div>
  <div class="gl-as-t3"><strong>Thumb 3</strong><span class="gl-as-coord">3 / 3 / 4 / 4</span></div>
</div>

.gl-as {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
  min-height: 480px;
  padding: 22px;
  background:
    radial-gradient(60% 80% at 80% 0%, rgba(236,72,153,0.16), transparent 60%),
    #1a0617;
  font-family: 'Inter', system-ui, sans-serif;
  color: #fce7f3;
  box-sizing: border-box;
}
.gl-as > div {
  border-radius: 14px;
  padding: 16px;
  display: flex; flex-direction: column;
  justify-content: space-between;
  gap: 6px;
}
.gl-as > div strong { font-size: 16px; font-weight: 700; color: #fff; }
.gl-as-coord {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.04em;
  align-self: flex-start;
  padding: 3px 8px; border-radius: 999px;
}
.gl-as-hero { grid-area: 1 / 1 / 3 / 4; background: linear-gradient(135deg, #ec4899, #be185d); }
.gl-as-hero .gl-as-coord { background: rgba(26,6,23,0.3); color: #fce7f3; }
.gl-as-tall { grid-area: 1 / 4 / 4 / 5; background: linear-gradient(180deg, #be185d, #831843); }
.gl-as-tall .gl-as-coord { background: rgba(26,6,23,0.3); color: #fce7f3; }
.gl-as-t1 { grid-area: 3 / 1 / 4 / 2; background: rgba(236,72,153,0.14); border: 1px solid rgba(236,72,153,0.32); }
.gl-as-t1 .gl-as-coord, .gl-as-t2 .gl-as-coord, .gl-as-t3 .gl-as-coord { background: rgba(236,72,153,0.18); color: #f472b6; }
.gl-as-t2 { grid-area: 3 / 2 / 4 / 3; background: rgba(236,72,153,0.22); border: 1px solid rgba(236,72,153,0.4); }
.gl-as-t3 { grid-area: 3 / 3 / 4 / 4; background: rgba(236,72,153,0.32); border: 1px solid rgba(236,72,153,0.5); }
@media (max-width: 720px) {
  .gl-as {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
  }
  .gl-as-hero { grid-area: 1 / 1 / 2 / 3; min-height: 160px; }
  .gl-as-tall { grid-area: 2 / 1 / 3 / 3; min-height: 120px; }
  .gl-as-t1 { grid-area: 3 / 1 / 4 / 2; }
  .gl-as-t2 { grid-area: 3 / 2 / 4 / 3; }
  .gl-as-t3 { display: none; }
}