open-vault/website/components/hcp-callout-section/HCPCalloutSection.module.css

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

  & .header {
    display: flex;
    justify-content: center;
    margin-bottom: 88px;
    @media (max-width: 1120px) {
      margin-bottom: 48px;
    }
    & h2 {
      margin: 0;
      text-align: center;
      max-width: 450px;
    }
  }

  & .content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    @media (max-width: 1120px) {
      flex-direction: column-reverse;

      & .info {
        margin-top: 32px;
      }
    }

    & .info {
      max-width: 488px;
      margin-right: 32px;

      & h1 {
        margin-top: 0;
        margin-bottom: 8px;
      }
      & .description {
        color: var(--gray-2);
        margin-top: 28px;
        margin-bottom: 0;

        @media (max-width: 900px) {
          margin-top: 18px;
        }
      }
      & .links {
        margin-top: 32px;
        display: inline-flex;
        flex-direction: column;

        & > * {
          &:not(:last-child) {
            margin-bottom: 24px;
          }
        }
      }
    }

    & > img {
      align-self: center;
      margin-right: -48px;
      @media (max-width: 670px) {
        max-width: 100%;
      }
    }
  }
}

.chin {
  composes: g-type-label from global;
}

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