app/components/lists.css
ul, ol {
  display: grid;
  gap: .5rem;
  padding: 0;
  margin: 0 10vw;
  text-align: left;

  --fluid-type-min-size: 1.25;
  --fluid-type-max-size: 2.5;
  --fluid-type-min-screen: 20;
  --fluid-type-max-screen: 88;

  font-size: calc(
    (var(--fluid-type-min-size) * 1rem) + (var(--fluid-type-max-size) - var(--fluid-type-min-size)) * (100vw - (var(--fluid-type-min-screen) * 1rem)) /
      (var(--fluid-type-max-screen) - var(--fluid-type-min-screen))
  );

  &[tight] {
    margin: 0;
  }
}

ul {
  & > li:before {
    position: relative;
    top: -0.075em;
    margin-inline-end: 1rem;
  }
}

ol {
  list-style: none;
  counter-reset: slyd-list-counter;

  & > li {
    counter-increment: slyd-list-counter;

    &:before {
      content: "0" counter(slyd-list-counter);
      top: 0.1em;
      position: relative;
    }
  }
}

li {
  display: inline-flex;
  align-items: flex-start;
  font-weight: 300;
  max-width: var(--max-linelength);

  &:before {
    content: "»";
    color: var(--text-color-3);
    font-weight: bold;
    font-size: 1.5em;
    margin-right: 2rem;
    font-family: var(--serif);
    line-height: 1;
  }
}