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

.root {
  composes: g-grid-container from global;
  padding-top: 88px;
  padding-bottom: 88px;

  @media (--medium-up) {
    padding-top: 160px;
    padding-bottom: 160px;
  }
}

.intro {
  --columns: 1;

  padding-top: 88px;
  padding-bottom: 88px;
  border-top: 1px solid var(--gray-6);
  display: grid;
  column-gap: 32px;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  row-gap: 32px;

  @media (--medium-up) {
    --columns: 12;

    padding-top: 140px;
    padding-bottom: 140px;
  }
}

.introTitle {
  margin: 0;
  grid-column: 1 / -1;
  composes: g-type-display-2 from global;

  @media (--medium-up) {
    grid-column: 1 / 6;
  }
}

.introDescription {
  grid-column: 1 / -1;
  composes: g-type-body-large from global;

  @media (--medium-up) {
    grid-column: 7 / -1;
  }

  & :first-child {
    margin-top: 0;
  }

  & :last-child {
    margin-bottom: 0;
  }
}

.contentContainer {
  --columns: 1;

  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  grid-gap: 32px;

  @media (--medium-up) {
    --columns: 12;
  }
}

.diagram {
  grid-column: 1 / -1;

  @media (--medium-up) {
    grid-column: 1 / 6;
  }
}

.features {
  padding: 0;
  grid-column: 1 / -1;

  @media (--medium-up) {
    grid-column: 7 / -1;
  }

  & > 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;
        }
      }
    }
  }
}