open-consul/website/components/io-usecase-section/style.module.css

.section {
  position: relative;
  max-width: 1600px;
  margin-right: auto;
  margin-left: auto;
  padding-top: 64px;
  padding-bottom: 64px;

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

  & + .section {
    padding-bottom: 132px;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: var(--gray-6);
      opacity: 0.4;

      @media (--medium-up) {
        border-radius: 6px;
        left: 24px;
        right: 24px;
      }
    }
  }

  &.isFlush {
    padding-bottom: 96px;

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

    &::before {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
  }
}

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

.columns {
  --columns: 1;

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

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

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

  &:nth-child(2) {
    @media (--medium-up) {
      grid-column: 8 / -1;
      padding-top: 16px;
    }
  }
}

.eyebrow {
  margin: 0;
  composes: g-type-display-5 from global;
}

.heading {
  margin: 16px 0 32px;
  padding-bottom: 32px;
  composes: g-type-display-3 from global;
  border-bottom: 1px solid var(--black);
}

.description {
  composes: g-type-body from global;

  & > p {
    margin: 0;

    & + p {
      margin-top: 16px;
    }
  }
}

.cta {
  margin-top: 32px;
}