/* Playground: big title, then the work in justified rows (same gallery as the case studies) */
.pg-top { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px 40px; padding: clamp(120px, 12vw, 170px) var(--pad) clamp(30px, 4vw, 56px); }
.pg-top h1 { font-family: var(--display); font-weight: 600; font-size: clamp(64px, 12.4vw, 210px); line-height: .82; letter-spacing: -.06em; margin-left: -.04em; color: var(--ink); }
.pg-top h1 i { position: relative; display: inline-block; width: .26em; height: .26em; }
.pg-top h1 .icon { position: absolute; left: .1em; top: -.42em; width: 100%; height: 100%; color: var(--star-deep); }
.pg-top__side { display: grid; gap: 14px; max-width: 30ch; padding-bottom: .6vw; }
.pg-top__side p { font-size: clamp(15px, 1.15vw, 18px); line-height: 1.55; color: var(--grey); }
.pg-wall { padding-bottom: clamp(80px, 9vw, 140px); }
.pg-wall .grp { display: contents; }

@media (max-width: 860px) {
  .pg-top { grid-template-columns: 1fr; }
  .pg-wall .row { flex-direction: column; }
  .pg-wall .grp { display: flex; gap: var(--gap); }
  .pg-wall .row figure { flex: var(--ar) 1 0; }
}