<div class="gl-bb">
  <article class="gl-bb-hero">
    <span class="gl-bb-name">Hero</span>
    <span class="gl-bb-tag">grid-area: hero</span>
  </article>
  <article class="gl-bb-stat">
    <span class="gl-bb-name">Stat</span>
    <span class="gl-bb-tag">grid-area: stat</span>
  </article>
  <article class="gl-bb-feat">
    <span class="gl-bb-name">Feature</span>
    <span class="gl-bb-tag">grid-area: feat</span>
  </article>
  <article class="gl-bb-quote">
    <span class="gl-bb-name">Quote</span>
    <span class="gl-bb-tag">grid-area: quote</span>
  </article>
  <article class="gl-bb-cta">
    <span class="gl-bb-name">CTA</span>
    <span class="gl-bb-tag">grid-area: cta</span>
  </article>
  <article class="gl-bb-info">
    <span class="gl-bb-name">Info</span>
    <span class="gl-bb-tag">grid-area: info</span>
  </article>
</div>

.gl-bb {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "hero hero stat  feat"
    "hero hero info  feat"
    "quote cta cta   feat";
  gap: 12px;
  width: 100%;
  min-height: 480px;
  padding: 18px;
  background:
    radial-gradient(80% 60% at 0% 100%, rgba(251,113,133,0.16), transparent 60%),
    radial-gradient(60% 60% at 100% 0%, rgba(249,115,22,0.16), transparent 60%),
    #1a0d0a;
  font-family: 'Inter', system-ui, sans-serif;
  color: #ffe4e6;
  box-sizing: border-box;
}
.gl-bb > article {
  background: #2a1410;
  border: 1px solid rgba(251,113,133,0.18);
  border-radius: 14px;
  padding: 16px;
  display: flex; flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  min-height: 0;
}
.gl-bb-name { font-size: 15px; font-weight: 700; color: #fff; }
.gl-bb-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.04em;
  align-self: flex-start;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(251,113,133,0.14); color: #fb7185;
}
.gl-bb-hero {
  grid-area: hero;
  background: linear-gradient(135deg, #fb7185, #f97316) !important;
  border: 0 !important;
}
.gl-bb-hero .gl-bb-name { color: #1a0d0a; font-size: 24px; }
.gl-bb-hero .gl-bb-tag { background: rgba(26,13,10,0.25); color: #1a0d0a; }
.gl-bb-stat  { grid-area: stat; }
.gl-bb-feat  { grid-area: feat; background: linear-gradient(180deg, #2a1410, #4a1a14); }
.gl-bb-quote { grid-area: quote; }
.gl-bb-cta   { grid-area: cta; background: rgba(251,113,133,0.14); }
.gl-bb-info  { grid-area: info; }
@media (max-width: 720px) {
  .gl-bb {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4, 1fr);
    grid-template-areas:
      "hero hero"
      "stat info"
      "feat feat"
      "quote cta";
  }
}