.markdown {
  /* handling long text, like URLs */
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5 {
  margin-bottom: calc(var(--spacer) / 2);
}

.markdown h1 {
  font-size: var(--font-size-h3);
}

.markdown h2 {
  font-size: var(--font-size-h4);
}

.markdown h3 {
  font-size: var(--font-size-large);
}

.markdown h4,
.markdown h5 {
  font-size: var(--font-size-base);
}

.markdown ul,
.markdown ol {
  margin: 0;
  margin-bottom: var(--spacer);
  padding-left: 1.5rem;
}

.markdown ul {
  list-style: none;
}

.markdown ul li {
  position: relative;
  display: block;
}

.markdown ul li:before {
  content: '▪';
  top: -2px;
  position: absolute;
  left: -1.5rem;
  color: var(--brand-grey-light);
  user-select: none;
}

.markdown li + li {
  margin-top: calc(var(--spacer) / 8);
}

.markdown li ul,
.markdown li ol,
.markdown li p {
  margin-bottom: 0;
  margin-top: calc(var(--spacer) / 8);
}

.markdown hr {
  display: block;
  margin: calc(var(--spacer) * 1.5) auto;
  max-width: 20%;
  border: 0;
  border-top: 2px solid var(--border-color);
}

.markdown img {
  margin-bottom: calc(var(--spacer) / 2);
}
