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

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

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: var(--space-0);
}

ul,
ol {
  margin: var(--space-0);
  padding: var(--space-0);
}

img {
  max-width: var(--size-full);
  display: block;
}

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

.container {
  width: min(var(--size-full), var(--page-max));
  margin-inline: auto;
  padding-inline: var(--gutter-max);
}

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

.section--sm {
  padding-block: var(--section-y-sm);
}

.section--lg {
  padding-block: var(--section-y-lg);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, var(--space-24));
}

.stack--row {
  flex-direction: var(--stack-row-direction);
  align-items: var(--stack-row-align);
}

.grid {
  display: grid;
  gap: var(--grid-gap, var(--space-30));
  grid-template-columns: repeat(var(--grid-cols, 12), minmax(0, 1fr));
}

.grid--2 {
  --grid-cols: var(--grid-cols-2);
}

.grid--3 {
  --grid-cols: var(--grid-cols-3);
}

.grid--4 {
  --grid-cols: var(--grid-cols-4);
}

.type-hero-home {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--type-hero-home-size);
  line-height: var(--type-hero-home-lh);
}

.type-hero-page {
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
  font-size: var(--type-hero-page-size);
  line-height: var(--type-hero-page-lh);
}

.type-title-lg {
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
  font-size: var(--type-title-lg-size);
  line-height: var(--type-title-lg-lh);
}

.type-title-md {
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
  font-size: var(--type-title-md-size);
  line-height: var(--type-title-md-lh);
}

.type-title-sm {
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
  font-size: var(--type-title-sm-size);
  line-height: var(--type-title-sm-lh);
}

.type-body-lg {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-lh);
}

.type-body {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
}

.type-body-sm {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-lh);
}

.type-caption {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-lh);
}

.text-default {
  color: var(--color-text);
}

.text-medium {
  font-weight: var(--font-weight-medium);
}

.text-muted {
  color: var(--color-text-muted);
}