.readme {
  margin-top: calc(var(--grid-line) * 1.5);
  padding: var(--grid-line) calc(var(--side-padding) * 3.5);
  border-radius: 6px;
  background: var(--background-1);

  max-width: var(--max-line);
  margin-left: auto;
  margin-right: auto;

  @media (max-width: 800px) {
    padding: 14px calc(var(--side-padding) * 2);
  }

  &:empty {
    display: none;
  }

  /* increase density around paragraphs */
  p, ul, ol, summary {
    padding-top: 0;
    margin-bottom: 14px; /* half a gridline */
    ul, ol {
      margin-bottom: 0;
    }
  }

  img, video {
    max-width: 100% !important;
    height: auto;
  }

  code {
    background: var(--highlight);
  }

  pre {
    border-radius: 6px;
    background: var(--highlight);
  }
  pre code {
    background: transparent;
  }

  kbd {
    display: inline-block;
    border: 1px solid var(--background-3);
    border-radius: 6px;
    line-height: 1.4rem;
    padding: 0px 4px;
    box-shadow: inset 0px -1px 0px var(--foreground-4);
    background: var(--highlight);
  }

  table {
    border-spacing: 0px;
    border-collapse: collapse;
    margin-bottom: 14px;

    tr:nth-child(2n) {
      background: rgb(from var(--background-2) r g b / 0.3);
    }

    td {
      border: 1px solid var(--background-3);
      padding: 6px 13px;
    }
  }
}