article {
  section {
    p {
      margin-inline-start: 0;
    }
  }

  table {
    margin-inline-start: 0;
  }

  img {
    margin-block-start: var(--grid);
    margin-block-end: var(--grid);
    margin-inline-start: 0;
    margin-inline-end: 0;
    border: 1px solid #ccc;
    box-sizing: content-box;
    background-color: #fff;
    max-width: 100%;
  }

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

  li {
    margin-block-start: calc(var(--grid) / 2);
    margin-block-end: 0;
    margin-inline-start: calc(var(--grid) / 2);
    margin-inline-end: 0;

    blockquote {
      display: inline-block;
      padding: 0 0.5rem;
    }
  }

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

    div {
      display: contents;
    }

    dt {
      grid-column: 1 / 2;
    }

    dd {
      grid-column: 2 / 2;
    }
  }

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

    p {
      margin: 0;
    }
  }

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

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

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

    p {
      margin-block-start: var(--grid-rhythm);
      margin-block-end: var(--grid-rhythm);
    }

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