.journal-grid { display: grid; isolation: isolate; color: var(--color-light); background: var(--color-dark); }
.journal-grid__texture-wrap, .journal-grid__inner { grid-area: 1 / 1; }
.journal-grid__texture-wrap { z-index: 0; contain: size; min-inline-size: 0; min-block-size: 0; opacity: .58; mix-blend-mode: multiply; }
.journal-grid__texture { width: 100%; height: 100%; object-fit: cover; }
.journal-grid__inner { z-index: 1; padding-block: 100px; }
.journal-grid__heading { text-align: center; }
.journal-grid__kicker { color: var(--color-accent); font-size: 14px; font-weight: 700; line-height: 15.4px; letter-spacing: 3.36px; text-transform: uppercase; }
.journal-grid__title { margin-top: 40px; font-family: var(--font-display); font-size: 70px; font-weight: 500; line-height: .94; text-transform: uppercase; }
.journal-grid__lead { margin-top: 30px; color: var(--color-canvas); font-size: 18px; font-weight: 500; line-height: 25px; }
.journal-grid__items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: 20px; margin-top: 70px; }
.journal-grid__item--lead { grid-column: span 2; }
.journal-grid__item--feature { grid-column: 3 / span 2; grid-row: 1 / span 2; }
/* Use balanced pairs before the four-column mosaic would squeeze its headings. */
@media (max-width: 1359px) {
  .journal-grid__items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
  .journal-grid__item--lead, .journal-grid__item--feature { grid-column: auto; grid-row: auto; }
}
@media (max-width: 639px) {
  .journal-grid__items { grid-template-columns: 1fr; gap: 10px; }
  .journal-grid__inner { padding-block: 90px 60px; }
  .journal-grid__kicker { font-size: 12px; line-height: 13.2px; letter-spacing: 2.88px; }
  .journal-grid__title { margin-top: 20px; font-size: 48px; line-height: .94; }
  .journal-grid__lead { max-width: 320px; margin: 20px auto 0; }
}