html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text-body);
  background: var(--surface-page);
}

.site-main > :first-child {
  padding-top: var(--nav-offset-mobile);
}

@media (min-width: 48em) {
  .site-main > :first-child {
    padding-top: var(--nav-offset-desktop);
  }
}

.l-container-default,
.l-container-wide,
.l-container-narrow {
  width: min(100% - 2rem, var(--container-default));
  margin-inline: auto;
}

.l-container-wide {
  width: min(100% - 2rem, var(--container-default));
}

@media (min-width: 64em) {
  .l-container-wide {
    width: min(100% - 2rem, var(--container-wide));
  }
}

.l-container-narrow {
  width: min(100% - 2rem, var(--container-narrow));
}

.section {
  padding-block: var(--space-16);
}

.section--compact {
  padding-block: var(--space-12);
}

.section--spacious {
  padding-block: var(--space-20);
}

@media (max-width: 47.99em) {
  .section {
    padding-block: var(--space-12);
  }

  .section--compact {
    padding-block: var(--space-10);
  }

  .section--spacious {
    padding-block: var(--space-16);
  }
}