// Sections

body {
  // Remove the margin in all browsers (opinionated).
  margin: 0;
  padding: 0;
}

// Headings
//
// All HTML headings, `<h1>` through `<h6>`, are available. `%h1` through `%h6`
// classes are also available, for when you want to match the font styling of a
// heading but still want your text to be displayed inline.
h1,
%h1 {
  @include margin-block(1);
  font-size: var(--fs-xxl);
  line-height: var(--heading-line-height);
}

h2,
%h2 {
  @include margin-block(1);
  font-size: var(--fs-xl);
  line-height: var(--heading-line-height);
}

h3,
%h3 {
  @include margin-block(1);
  font-size: var(--fs-l);
  line-height: var(--heading-line-height);
}

h4,
%h4 {
  @include margin-block(1);
  font-size: var(--fs-m);
  line-height: var(--heading-line-height);
}

h5,
%h5 {
  @include margin-block(1);
  font-size: var(--fs-s);
  line-height: var(--heading-line-height);
}

h6,
%h6 {
  @include margin-block(1);
  font-size: var(--fs-xs);
  line-height: var(--heading-line-height);
}

// Set max text line width for readability.
.main {
  h2,
  h3,
  h4,
  h5,
  h6,
  ul,
  ol,
  dl,
  p {
    max-width: var(--max-line-width);
  }
}