/* Mobile First Layout */

body {
  min-height: 100vh;
}

.page {
  width: min(720px, 100%);
  min-height: 100vh;
  margin-inline: auto;
  padding-inline: var(--pad-inline);
  padding-block: var(--pad-block);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(40px, 8vw, 72px);
}

.content {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 6vw, 56px);
}

.footer {
  display: flex;
  justify-content: center;
  padding: var(--space-3) var(--pad-inline) var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
}

@media (min-width: 640px) {
  .page {
    gap: clamp(48px, 7vw, 80px);
  }
}

@media (min-width: 1024px) {
  .page {
    width: min(840px, 100%);
    padding-inline: clamp(32px, 5vw, 64px);
    padding-block: clamp(32px, 4vw, 56px);
  }

  .content {
    gap: clamp(40px, 5vw, 72px);
  }
}