/* The About page. Builds on home.css. */

.top nav a[aria-current="page"] {
  color: var(--ink);
  background: var(--sunken);
}

.about-top {
  padding-top: 28px;
  padding-bottom: 20px;
}

.about-top .lede {
  max-width: 640px;
  margin-bottom: 0;
}

.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.fact {
  padding: 18px 20px;
}

.fact h3 {
  font-size: 16px;
  font-weight: 700;
}

.fact p {
  margin-top: 4px;
  font-size: 14px;
  color: var(--ink-muted);
  text-wrap: pretty;
}

.rules {
  grid-template-columns: repeat(2, 1fr);
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.btn.quiet {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--ink);
}

.btn.quiet:hover {
  background: var(--sunken);
}

@media (max-width: 1020px) {
  .facts {
    grid-template-columns: repeat(2, 1fr);
  }

  .rules {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .facts {
    grid-template-columns: 1fr;
  }
}