@import './../../styles/variables/index.scss';
@import './../../styles/utils/index.scss';

.capabilitiesIntroDetail {
  max-width: 1198px;
  padding: 0 16px;
  margin: 40px auto 0;
  width: 100%;
  text-align: center;
  position: relative;

  @media (min-width: 560px) {
    margin: 80px auto 0;
  }

  @media (min-width: 900px) {
    margin: 71px auto 0;
    height: 457px;
    padding: 0 43px;
  }

  .container {
    max-width: 1040px;

    svg {
      position: absolute;
      top: 0;
      right: -80px;
      height: 291px;
      width: 288px;
      z-index: -1;

      @media (min-width: 560px) {
        top: -32px;
        right: 32px;
        width: auto;
        max-width: ruleOfThree(736px, 100%, 512px);
        height: auto;
      }

      @media (min-width: 900px) {
        right: 0;
        width: auto;
        max-height: 600px;
        max-width: 600px;
        height: auto;
      }
    }

    .introText {
      position: relative;
      color: $medium-blue;
      margin-bottom: 24px;
    }

    .title {
      position: relative;
      font-family: $font-family-newsreader;
      font-size: 40px;
      line-height: 44px;
      letter-spacing: 0;
      color: $main-blue;
      margin-bottom: 24px;

      @media (min-width: 560px) {
        font-size: 60px;
        line-height: 62px;
      }

      @media (min-width: 900px) {
        font-size: $font-size-xxxlarge;
        line-height: 90px;
      }
    }

    .subTitle {
      position: relative;
      margin-bottom: 90px;

      @media (min-width: 560px) {
        margin-bottom: ruleOfThree(736px, 100%, 200px);
      }

      @media (min-width: 900px) {
        margin-bottom: 350px;
      }
    }
  }
}