.story:not(.story--standalone) {
  margin: var(--offset-y) var(--offset-x);
}

.story__wrapper {
  margin: 0 auto;
  max-width: 855px;
}

.story__body {
  font: var(--tall);
}

.story__body a {
  text-decoration: underline;
}

.story__headline {
  font-weight: bold;
}

h3.story__headline,
.story__body h3 {
  font: var(--grande);
}

h4.story__headline,
.story__body h4 {
  font: var(--tall);
}

h5.story__headline,
.story__body h5 {
  font: var(--petit);
}

h6.story__headline,
.story__body h6 {
  font: var(--short);
}

.story__body strong {
  font-weight: 600 !important;
}

.story__body em {
  font-style: italic;
}

.story__body p {
  margin: 2.5rem 0;
}

.story__body p:first-child {
  margin-top: 0;
}

.story__body p:last-child {
  margin-bottom: 0;
}

@media (min-width: 1025px) {
  .story__body ul,
  .story__body ol {
    padding-left: 2.5em;
  }
}

@media (max-width: 1024px) {
  .story__body ul,
  .story__body ol {
    padding-left: 1.5em;
  }
}

.story__body li {
  position: relative;
  margin: 7.5px 0;
}

.story__body ul li:before {
  content: "";
  position: absolute;
  top: 15px;
  left: -20px;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--pen);
}
.story__body ol {
  counter-reset: item;
}

.story__body ol li {
  counter-increment: item;
}

.story__body ol li:before {
  content: counter(item) ".";
  position: absolute;
  right: calc(100% + 10px);
}