.pag-demo-grid,
.pag-record-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pag-demo-card,
.pag-record-grid article {
  border: 1px solid #d7e1f1;
  border-radius: .9rem;
  padding: 1.25rem;
}

.pag-demo-card {
  display: flex;
  flex-direction: column;
  min-height: 18rem;
}

.pag-demo-card > span {
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.pag-demo-card h3,
.pag-record-grid h3 {
  margin-bottom: .5rem;
}

.pag-demo-card p {
  flex: 1;
}

.pag-demo-card--midnight { background: #0f172a; color: #fff; }
.pag-demo-card--paper { background: #fffdf8; color: #292524; }
.pag-demo-card--berry { background: #fff1f2; color: #4c0519; }
.pag-demo-card--midnight h3 { color: #fff; }
.pag-demo-card--paper h3 { color: #292524; }
.pag-demo-card--berry h3 { color: #4c0519; }

.pag-demo-status {
  color: #40516e;
  margin: 1rem 0 0;
}

.pag-record-grid article {
  background: #fff;
}

.pag-record-grid code {
  background: #eaf1fb;
  border-radius: .35rem;
  color: #17345f;
  display: inline-block;
  padding: .25rem .45rem;
}

@media (max-width: 800px) {
  .pag-demo-grid,
  .pag-record-grid {
    grid-template-columns: 1fr;
  }

  .pag-demo-card {
    min-height: 0;
  }
}