*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--sh-bg);
  color: var(--sh-fg);
  font-family: var(--sh-font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--sh-bg);
  color: var(--sh-fg);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

img {
  display: block;
  max-width: 100%;
}

main {
  min-height: 60vh;
}

.l-section {
  padding: var(--space-section-y) var(--space-page-x);
  border-bottom: var(--border-hairline);
}

.l-section--compact {
  padding-top: 28px;
  padding-bottom: 28px;
}

.l-section--grid {
  background-image:
    linear-gradient(to right, var(--sh-line-2) 1px, transparent 1px),
    linear-gradient(to bottom, var(--sh-line-2) 1px, transparent 1px);
  background-size: 64px 64px;
}

.l-grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
}

.l-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.l-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}