ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

ol {
  counter-reset: list-counter;
}

.container-narrow ol li {
  counter-increment: list-counter;
  position: relative;
  padding-left: var(--spacing-32);
  margin-top: var(--spacing-16);
}

.container-narrow ol,
.container-narrow ul,
.list-ordered,
.list-unordered {
  margin-bottom: var(--spacing-24);
}

.container-narrow ol li::before {
  content: counter(list-counter) ".";
  position: absolute;
  left: 0;
  color: var(--color-red);
  font-weight: 500;
  margin-right: var(--spacing-12);
}

.container-narrow ul li {
  position: relative;
  padding-left: var(--spacing-32);
  margin-bottom: var(--spacing-16);
}

.container-narrow ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(0.375rem - 3px + 2px);
  width: calc(var(--spacing-12) * 0.75);
  height: calc(var(--spacing-12) * 0.75);
  border: 2px solid var(--color-red);
  border-radius: 0;
}

ol li p,
ul li p {
  margin: 0;
}

.list-ordered {
  counter-reset: list-counter;
}

.list-ordered li {
  counter-increment: list-counter;
  position: relative;
  padding-left: var(--spacing-32);
}

.list-ordered li::before {
  content: counter(list-counter) ".";
  position: absolute;
  left: 0;
  color: var(--color-red);
  font-weight: 500;
  margin-right: var(--spacing-12);
}

.list-unordered li {
  position: relative;
  padding-left: var(--spacing-32);
  margin-bottom: var(--spacing-16);
}

.list-unordered li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(0.375rem - 3px + 2px);
  width: calc(var(--spacing-12) * 0.75);
  height: calc(var(--spacing-12) * 0.75);
  border: 2px solid var(--color-red);
  border-radius: 0;
}

.list-ordered li p,
.list-unordered li p {
  margin: 0;
}