open-consul/website/source/assets/stylesheets/consul-connect/components/_use-cases.scss

.g-use-cases {
  margin: 48px 0 8px;

  @media (min-width: 768px) {
    display: flex;
    justify-content: center;
    margin: 0 (-$site-gutter-padding);
  }

  img {
    width: 51%;

    @media (min-width: 768px) {
      width: 80%;
    }
  }

  h3 {
    font-weight: 600;
    margin: 40px 0 0;

    span {
      display: block;
      font-weight: 300;
    }
  }

  p {
    margin-top: 0.5em;

    @media (min-width: 768px) {
      margin-top: 1em;
    }
  }

  & > div {
    padding: 0 16px;
    position: relative;
    text-align: center;

    @media (min-width: 768px) {
      padding: 0 $site-gutter-padding;
      width: 33.33333%;
    }

    @media (min-width: 992px) {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    & + div {
      margin-top: 56px;

      @media (min-width: 768px) {
        margin-top: 0;
      }
    }
  }

  .button {
    @media (min-width: 768px) {
      margin-top: 22px;
    }
  }
}