/* Site overrides on top of Pico CSS. */

:root {
  --pico-font-size: 100%;
}

/* Keep the brand link looking like text, not a link. */
.brand {
  color: inherit;
  text-decoration: none;
}

main.container {
  min-height: 60vh;
}

/* About page: text on the left, photo on the right. Pico's .grid stacks
   the columns below 768px, so the photo drops under the text on phones. */
.about-photo {
  margin: 0;
}

.about-photo img {
  width: 100%;
  height: auto;
  border-radius: var(--pico-border-radius);
}

.about-photo figcaption {
  text-align: center;
}

@media (min-width: 768px) {
  .about-grid {
    grid-template-columns: 2fr 1fr;
    align-items: start;
  }
}

/* Donate page: a single call-to-action card. */
.donate-card {
  text-align: center;
}

.donate-card h2 {
  margin-bottom: 0.5rem;
}

.donate-button {
  display: inline-block;
  min-width: 12rem;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.donate-card footer {
  text-align: left;
}

footer.container {
  border-top: 1px solid var(--pico-muted-border-color);
  padding-top: 1rem;
  color: var(--pico-muted-color);
}