.page {
  position: relative;
  z-index: 1;
  width: min(100% - 2 * var(--gutter), var(--page-max));
  min-height: 100vh;
  min-height: 100dvh;
  margin-inline: auto;
  padding-top: calc(var(--pad-top) + env(safe-area-inset-top));
  padding-bottom: calc(var(--pad-bottom) + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}

.hero {
  margin-top: auto;
}
.footer {
  margin-top: auto;
}

.footer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--text-3);
  font-size: 12.5px;
  text-align: center;
}
.footer p {
  margin: 0;
}
.footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 18px;
}
.footer__links a {
  padding: 2px;
  color: var(--text-2);
  transition: color var(--fast) var(--ease);
}
.footer__links a:hover {
  color: var(--text);
}