<div class="gl-hg">
  <header class="gl-hg-h">
    <span class="gl-hg-name">Header</span>
    <span class="gl-hg-tag">grid-area: h</span>
  </header>
  <nav class="gl-hg-l">
    <span class="gl-hg-name">Sidebar</span>
    <span class="gl-hg-tag">grid-area: l</span>
  </nav>
  <main class="gl-hg-m">
    <span class="gl-hg-name">Main content</span>
    <span class="gl-hg-tag">grid-area: m</span>
  </main>
  <aside class="gl-hg-r">
    <span class="gl-hg-name">Aside</span>
    <span class="gl-hg-tag">grid-area: r</span>
  </aside>
  <footer class="gl-hg-f">
    <span class="gl-hg-name">Footer</span>
    <span class="gl-hg-tag">grid-area: f</span>
  </footer>
</div>

.gl-hg {
  display: grid;
  grid-template-columns: 180px 1fr 180px;
  grid-template-rows: 72px 1fr 56px;
  grid-template-areas:
    "h h h"
    "l m r"
    "f f f";
  gap: 12px;
  width: 100%;
  min-height: 480px;
  padding: 18px;
  background:
    radial-gradient(60% 80% at 80% 0%, rgba(16,185,129,0.12), transparent 60%),
    #051512;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  color: #d1fae5;
  box-sizing: border-box;
}
.gl-hg > * {
  background: #0d2620;
  border: 1px solid rgba(52,211,153,0.22);
  border-radius: 10px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  padding: 12px;
  text-align: center;
}
.gl-hg-name { font-size: 13px; font-weight: 600; color: #ecfdf5; }
.gl-hg-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.04em;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(16,185,129,0.14); color: #34d399;
}
.gl-hg-h { grid-area: h; background: linear-gradient(135deg, #10b981, #34d399); border-color: transparent; }
.gl-hg-h .gl-hg-name { color: #051512; }
.gl-hg-h .gl-hg-tag { background: rgba(5,21,18,0.25); color: #051512; }
.gl-hg-l { grid-area: l; }
.gl-hg-m { grid-area: m; background: #14302a; }
.gl-hg-r { grid-area: r; }
.gl-hg-f { grid-area: f; background: rgba(16,185,129,0.12); }
@media (max-width: 720px) {
  .gl-hg {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas: "h" "l" "m" "r" "f";
  }
}