.content {
  display: grid;
  gap: 2.5em;
  position: relative;
}

.content header,
.content article {
  display: grid;
  gap: 2.5em;
  margin-inline: auto;
  text-wrap: pretty;
  width: min(100%, 44em);
}

.content header h1,
.content header h2,
.content header h3 {
  font-weight: 600;
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-x-tight);
  text-wrap: balance;
}

.content header h1,
.content header h2 {
  font-size: var(--font-size-xxx-large);
  margin-bottom: -0.2em;
  margin-top: -0.4em;
}

.content header h3 {
  font-size: var(--font-size-xx-large);
  margin-bottom: -0.2125em;
  margin-top: -0.4125em;
}

.content header p {
  font-size: var(--font-size-xx-large);
  font-weight: 600;
  line-height: var(--line-height-x-tight);
  letter-spacing: var(--letter-spacing);
  margin-bottom: -0.2125em;
  margin-top: -0.4125em;
}

.content article h1,
.content article h2,
.content article h3 {
  font-weight: 600;
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-tight);
}

.content article h1,
.content article h2 {
  font-size: var(--font-size-xx-large);
  margin-bottom: -0.675em;
  margin-top: -0.475em;
  padding-top: 2em;
}

.content article h3 {
  font-size: var(--font-size-x-large);
  margin-bottom: -0.7875em;
  margin-top: -0.4875em;
  padding-top: 0.8625em;
}

.content article p,
.content article ol,
.content article ul {
  font-size: var(--font-size-large);
  letter-spacing: var(--letter-spacing);
  margin-bottom: -0.35em;
  margin-top: -0.575em;
}

.content article ol {
  counter-reset: counter;
  display: grid;
  gap: 0.4875em;
  padding-left: 2.0375em;
}

.content article ol li {
  counter-increment: counter;
  position: relative;
}

.content article ol li:before {
  content: counter(counter) '.';
  font-feature-settings: 'ss05', 'tnum';
  margin-right: 1ch;
  position: absolute;
  right: 100%;
  text-align: right;
}

.content article ul {
  display: grid;
  gap: 0.1625em;
  list-style: disc;
  padding-left: 1.1375em;
}

.content article .list {
  list-style: none;
  padding-left: 0;
}

.content article .list--checks li {
  padding-left: 1.4em;
  position: relative;
}

.content article .list--checks li:before {
  align-items: start;
  background: url('/assets/images/general/icon-check.svg') center / 0.45em auto no-repeat var(--color-blue);
  border-radius: 100%;
  content: '';
  display: flex;
  height: 1em;
  justify-content: center;
  left: 0;
  line-height: 1;
  pointer-events: none;
  position: absolute;
  top: 0.2325em;
  width: 1em;
}

.content article .list--features {
  font-size: var(--font-size-medium);
  gap: 1.125em;
  grid-template-columns: 1fr 1fr;
  line-height: var(--line-height-tight);
  margin: 0;
}

.content article .list--features li {
  margin-bottom: -0.275em;
  margin-top: -0.4875em;
  padding-left: 0.725em;
  position: relative;
}

.content article .list--features li:before {
  content: '•';
  display: inline-block;
  font-size: var(--font-size-large);
  margin-right: 0.325em;
  left: 0;
  position: absolute;
  top: -0.0625em;
}

.content article .list--more {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.content article .list--more li:not(:last-child):after {
  content: '•';
  display: inline-block;
  margin-inline: 0.2625em;
}

.content article .list--yes li:after {
  background: var(--color-highlight);
  color: var(--color-ink);
  content: 'YES!';
  display: inline-block;
  font-family: var(--font-family-sharpie);
  font-size: 85%;
  font-variant-ligatures: none;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1;
  margin-left: 0.5em;
  padding: 0.1875em 0.35em 0.2625em 0.35em;
  pointer-events: none;
  text-transform: uppercase;
  vertical-align: top;
}

.content article .list--yes li:nth-child(odd):after {
  transform: rotate(-3deg) translateY(0.1em);
}

.content article .list--yes li:nth-child(even):after {
  transform: rotate(3deg) translateY(0.2em);
}

.content article .figure,
.content article .video {
  padding-top: 3.5375em;
}

.content article .figure--inline,
.content article .video--inline {
  padding-top: 0;
}

.content article .figure + h2,
.content article .video + h2 {
  padding-top: 0.2875em;
}

.content article .figure + h3,
.content article .video + h3 {
  padding-top: 0.35em;
}

.content article > .figure:not(:first-child),
.content article > .video:not(:first-child) {
  margin-top: 0;
}

.content article > :first-child {
  padding-top: 0;
}



.content--center header,
.content--center article {
  text-align: center;
}

.content--full header,
.content--full article {
  margin-inline: initial;
  width: auto;
}



@media(min-width: 48em) {

  .content article .figure,
  .content article .video {
    margin-inline: -4em;
  }

  .content article ol,
  .content article ul {
    padding-left: 0;
  }

  .content--stacked header,
  .content--stacked article {
    margin-inline: initial;
    width: min(100%, 48em);
  }

}



@media(min-width: 64em) {

  .content--columns {
    align-items: start;
    gap: var(--space-x-large);
    grid-template-columns: repeat(20, 1fr);
  }

  .content--columns header,
  .content--columns article {
    margin-inline: initial;
    width: auto;
  }

  .content--columns header {
    grid-column: span 7;
  }

  .content--columns article {
    grid-column: 8 / span 13;
  }

}