:root {
  --swpu-gradient-start: #263b80;
  --swpu-gradient-end: #087ea4;
}

.md-header {
  background: linear-gradient(110deg, var(--swpu-gradient-start), var(--swpu-gradient-end));
}

.hero {
  margin: 1rem 0 2rem;
  padding: 2.4rem 2rem;
  color: #fff;
  background: linear-gradient(125deg, var(--swpu-gradient-start), var(--swpu-gradient-end));
  border-radius: 1rem;
  box-shadow: 0 0.8rem 2rem rgb(20 45 90 / 18%);
}

.hero h1 {
  margin: 0 0 0.8rem;
  color: inherit;
  font-weight: 700;
}

.hero p {
  max-width: 44rem;
  margin-bottom: 0;
  font-size: 1.05rem;
  opacity: 0.94;
}

.grid.cards > ul > li {
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.grid.cards > ul > li:hover {
  transform: translateY(-0.15rem);
  box-shadow: 0 0.5rem 1.2rem rgb(20 45 90 / 12%);
}

.article-meta {
  color: var(--md-default-fg-color--light);
  font-size: 0.82rem;
}

.md-typeset code {
  word-break: break-word;
}