consul/website/pages/home/style.css

.p-home {
  & > section {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  & .use-cases {
    padding-top: 128px;
    padding-bottom: 64px;

    @media (max-width: 800px) {
      padding-top: 88px;
    }

    & h2 {
      margin: 0;
      text-align: center;
      margin-bottom: 64px;
      @media (max-width: 800px) {
        margin-bottom: 48px;
      }
    }
  }
  & .ecosystem {
    padding-top: 88px;
    padding-bottom: 88px;
    @media (--large) {
      padding-top: 128px;
      padding-bottom: 128px;
    }
    & .g-text-split {
      padding-top: 0;
      padding-bottom: 0;
    }
    & .g-type-display-2 {
      margin: 0;
      text-align: center;
      margin-bottom: 64px;
      @media (max-width: 800px) {
        margin-bottom: 48px;
      }
    }
  }
  & section.cloud-offerings {
    padding-top: 88px;
    padding-bottom: 88px;

    & h2 {
      margin: 0 auto;
      text-align: center;
      max-width: 475px;
      margin-bottom: 64px;
      @media (max-width: 800px) {
        margin-bottom: 48px;
      }
    }
  }

  & .g-callouts {
    & > .g-grid-container > .items.layout-two-up > .callout-item-wrapper {
      padding: 0;
    }

    & .callout-item.layout-two-up {
      padding: 70px;

      &.theme-light {
        background-color: #f2f2f3;
        transition: filter 0.25s ease;

        &:hover {
          filter: brightness(97%);
        }
      }
    }
  }
  & section.features {
    background-color: var(--gray-6);
    & h3 {
      margin: 0;
      text-align: center;
      margin-bottom: 32px;
      @media (--large) {
        text-align: left;
      }
    }
  }
}