article section p {
  margin-left: 0;
}

article table {
  margin-left: 0;
}

article img {
  margin: var(--grid) 0;
  border: 1px solid #ccc;
  box-sizing: content-box;
  background-color: #fff;
}

article ul,
article ol,
article dl {
  margin-left: var(--grid);
  font-family: var(--mono-font);
}

article ul li ul,
article ol li ol {
  margin: 0 0 0 calc(var(--grid)*2);
  font-size: 1rem;
}

article ol li ol li,
article ul li ul li {
  margin-bottom: 0;
}

article dl {
  display: grid;
  grid-template-columns: minmax(auto, max-content);
  grid-column-gap: var(--grid);
}

article dl div {
  display: contents;
}

article dl dt {
  grid-column: 1 / 2;
}
article dl dd {
  grid-column: 2 / 2;
}

article blockquote {
  font-family: var(--mono-font);
}

article blockquote p {
  margin: 0;
}

@supports (line-height-step: 1px) {
  article {
    --grid-rhythm: 1.5em;
    line-height: 1.5;
    line-height-step: var(--grid-rhythm);
  }

  article h1,
  article h2,
  article h3,
  article h4,
  article h5,
  article h6 {
    display: inline-block;
    width: 100%;
    line-height-step: 0;
    line-height: 1.2;
    margin-bottom: 0;
  }

  article section {
    /* grid for debug */
    /* background-size: 100% var(--grid-rhythm); */
    /* background-image: linear-gradient(to bottom, #00bcd1 1px, transparent 1px); */
  }

  article p {
    margin-top: var(--grid-rhythm);
    margin-bottom: var(--grid-rhythm);
  }

  article pre,
  article table {
    line-height-step: 0;
    line-height: normal;
  }
}