open-consul/website/components/features-list/style.module.css

.featureListContainer {
  background-color: #000;
  padding-top: 128px;
  background-position: right top, left bottom;
  background-repeat: no-repeat;
  color: #fff;
}

.contentWrapper {
  composes: g-grid-container from global;
}

.featureContainer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  & .featureTextContainer {
    display: flex;
  }

  & .imageContainer {
    max-width: 490px;
    margin: 0 auto;
    padding-bottom: 40px;

    & img {
      max-width: 100%;
    }
  }

  @media (--large) {
    flex-wrap: nowrap;
    flex-direction: row-reverse;
    justify-content: space-between;

    & .featureTextContainer {
      margin-right: 60px;
    }

    & .featureText {
      max-width: 488px;
    }

    & .imageContainer {
      margin: 0;
    }
  }
}

.featuresContainer {
  padding-top: 157px;
  padding-bottom: 394px;
  display: grid;
  row-gap: 120px;
}

.title {
  composes: g-type-display-1 from global;
  max-width: 488px;
  margin: 0;
}

.listNumber {
  composes: g-type-display-5 from global;
  min-width: 40px;
  height: 40px;
  background-color: var(--consul);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 64px;
  margin-top: 10px;

  @media (--small) {
    margin-right: 30px;
    margin-top: 6px;
  }
}

.featureTitle {
  composes: g-type-display-2 from global;
  margin: 0;
}

.featureSubtitle {
  composes: g-type-body-large from global;
  margin-top: 16px;
  margin-bottom: 0;
}

.infoTitle {
  composes: g-type-display-5 from global;
  margin-top: 0;
  margin-bottom: 8px;
}

.infoSection {
  composes: g-type-body from global;
  margin-top: 32px;
  margin-bottom: 40px;
  display: grid;
  row-gap: 24px;

  & p,
  & ul {
    margin: 0;
  }
}