<div class="gl-mag">
  <div class="gl-mag-eyebrow">
    <span class="gl-mag-name">Issue 47 · Spring</span>
    <span class="gl-mag-tag">grid-area: eye</span>
  </div>
  <h2 class="gl-mag-title">
    <span class="gl-mag-name">The Long Read</span>
    <span class="gl-mag-tag">grid-area: title</span>
  </h2>
  <div class="gl-mag-lead">
    <span class="gl-mag-name">Lead paragraph</span>
    <span class="gl-mag-tag">grid-area: lead</span>
  </div>
  <figure class="gl-mag-fig">
    <span class="gl-mag-name">Photo plate</span>
    <span class="gl-mag-tag">grid-area: fig</span>
  </figure>
  <aside class="gl-mag-pull">
    <span class="gl-mag-name">Pull quote</span>
    <span class="gl-mag-tag">grid-area: pull</span>
  </aside>
  <div class="gl-mag-body">
    <span class="gl-mag-name">Body column</span>
    <span class="gl-mag-tag">grid-area: body</span>
  </div>
  <div class="gl-mag-foot">
    <span class="gl-mag-name">Footer · byline</span>
    <span class="gl-mag-tag">grid-area: foot</span>
  </div>
</div>

.gl-mag {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 56px auto 1fr auto 48px;
  grid-template-areas:
    "eye   eye   eye   eye   eye   eye"
    "title title title title fig   fig"
    "lead  lead  body  body  fig   fig"
    "pull  pull  body  body  fig   fig"
    "foot  foot  foot  foot  foot  foot";
  gap: 14px;
  width: 100%;
  min-height: 480px;
  padding: 22px;
  background: #f5f1ea;
  font-family: 'Playfair Display', Georgia, serif;
  color: #1c1c1e;
  box-sizing: border-box;
}
.gl-mag > * {
  background: #fff;
  border: 1px solid #d8d2c5;
  border-radius: 4px;
  padding: 14px;
  display: flex; flex-direction: column;
  justify-content: center; gap: 6px;
}
.gl-mag-name { font-size: 16px; font-weight: 700; color: #1c1c1e; }
.gl-mag-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 500;
  align-self: flex-start;
  padding: 2px 8px; border: 1px solid #1c1c1e;
  color: #1c1c1e;
  background: transparent;
}
.gl-mag-eyebrow { grid-area: eye; background: #1c1c1e !important; border: 0 !important; min-height: 36px; padding: 8px 14px; }
.gl-mag-eyebrow .gl-mag-name { color: #f5f1ea; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; }
.gl-mag-eyebrow .gl-mag-tag { color: #f5f1ea; border-color: #f5f1ea; }
.gl-mag-title { grid-area: title; margin: 0; }
.gl-mag-title .gl-mag-name { font-size: 36px; line-height: 1; letter-spacing: -0.02em; }
.gl-mag-fig { grid-area: fig; background: linear-gradient(160deg, #d4af37, #b89238) !important; border: 0 !important; color: #1c1c1e; }
.gl-mag-fig .gl-mag-name { color: #1c1c1e; }
.gl-mag-fig .gl-mag-tag { color: #1c1c1e; border-color: #1c1c1e; }
.gl-mag-lead { grid-area: lead; }
.gl-mag-pull { grid-area: pull; background: #1c1c1e !important; border: 0 !important; }
.gl-mag-pull .gl-mag-name { color: #f5f1ea; font-style: italic; }
.gl-mag-pull .gl-mag-tag { color: #f5f1ea; border-color: #f5f1ea; }
.gl-mag-body { grid-area: body; }
.gl-mag-foot { grid-area: foot; background: #f5f1ea !important; padding: 10px 14px; }
.gl-mag-foot .gl-mag-name { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.12em; }
@media (max-width: 720px) {
  .gl-mag {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(7, auto);
    grid-template-areas: "eye" "title" "fig" "lead" "body" "pull" "foot";
  }
}