navigation {
  font-family: Georgia;

  display: block;
  width: 70%;
  margin: 0 auto;
  padding: 0;
  border: 1px solid grey;

  ul {
    background: #F2F2F9;
    list-style: none;
    margin: 0;
    padding: 0.5em 1em;

    li {
      &:nth-child(n+2)[data-number]:before {
       content: "§" attr(data-number) ". ";
       font-family: sans;
      }
      &:nth-child(n+2):not([data-number]) {
       margin: 5px 0;
      }
    }
  }

  &.compact {
    width: 100%;
    border: none;
    border-top: 1px solid grey;
    padding-top: 2em;
    margin-top: 2em;

    ul {
      background: inherit;

      li {
        display: inline-block;
        &:not(:last-child) {
          margin-right: 1em;
        }
      }
    }
  }
}