:root {
  --wrap-pad: 1.25rem;
  --nav-height: 4rem;
}

.wrap {
  width: 100%;
  max-width: var(--width-max);
  margin-inline: auto;
  padding-inline: var(--wrap-pad);
}

main > section {
  padding-block: 5rem;
}

.skip-link {
  position: absolute;
  top: var(--space-s);
  left: var(--space-s);
  z-index: 20;
  padding: var(--space-s) var(--space-m);
  background: rgb(var(--bg));
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

@media (min-width: 40em) {
  :root {
    --wrap-pad: var(--space-l);
    --nav-height: 5rem;
  }

  main > section {
    padding-block: var(--space-2xl);
  }
}

@media (min-width: 64em) {
  :root {
    --wrap-pad: var(--space-xl);
  }
}