.hero-content {
  padding-left: 0px;
  z-index: 1;

  > :not(:last-child) {
    margin-bottom: var(--baseline);
  }

  h1 {
    font-size: var(--font-size-xxl);
    line-height: var(--line-height-tight);

    &::after {
      background-color: var(--color-pastel-green-400);
      content: "";
      display: block;
      height: 1px;
      margin-top: var(--baseline);
      width: 6.75rem;
      margin-left: 0px;
      margin-right: auto;
    }
  }

  >div>ul {
    list-style-position: inside;
    list-style-type: none;

    >li {
      padding-top: var(--space-xs);

      .vertical-line-before::before {
        background-color: var(--color-downriver-400);
      }

      &:not(:last-child) {
        border-bottom: 1px solid var(--color-iron-400);
        padding-bottom: var(--space-xs);
      }
    }

    @media (min-width: 40rem) {
      li {
        padding-left: var(--gutter);
      }
    }
  }
}

@media (min-width: 0) {
  .hero-content {
    grid-row: 1 / 2;
    grid-column: 1 / span 4;
  }
}

@media (min-width: 40rem) {
  .hero-content {
    grid-column: 1 / span 6;
  }
}