boundary/website/components/how-it-works/how-it-works.module.css

.root {
  padding: 88px 0;

  & .headerWrapper {
    & h2 {
      text-align: center;
      margin-top: 0;
      margin-bottom: 32px;
      @media (--small) {
        margin-bottom: 0;
      }
    }

    & p {
      max-width: 818px;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      color: var(--gray-2);
    }
  }
}

.contentContainer {
  display: flex;
  justify-content: space-between;
  position: relative;

  @media (--small) {
    flex-direction: column;
  }

  & > ul {
    max-width: 470px;
    margin-left: 128px;
    padding: 0;

    @media (width < 1120px) {
      margin-left: 64px;
    }

    @media (width < 1024px) {
      margin-left: 40px;
    }

    @media (--small) {
      margin-left: 0;
    }
  }
}

.diagram {
  width: 591px;
  max-width: 100%;
}

.features {
  & > li {
    list-style: none;

    & > div {
      list-style: none;
      padding-bottom: 285px;

      @media (--small) {
        padding-top: 0;
        margin-bottom: 0;
        padding-bottom: 100px;
      }
    }

    &:last-child {
      & > div {
        padding-bottom: 355px;
        margin-bottom: -200px;
        @media (--small) {
          padding-bottom: 0;
          margin-bottom: 0;
        }
      }
    }

    &:first-child {
      & > div {
        padding-top: 108px;
        @media (width < 1120px) {
          padding-top: 64px;
        }
      }
    }
  }
}