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

.capabilities {
  display: flex;
  flex-direction: column;
  max-width: 1198px;
  margin: 0 auto;
  margin-bottom: 56px;
  gap: 40px;
  padding: 0 16px;

  @media (min-width: 560px) {
    margin-bottom: 80px;
    gap: 63px;
    padding: 0 32px;
  }

  @media (min-width: 680px) {
    flex-direction: row;
  }

  @media (min-width: 900px) {
    margin-bottom: 80px;
    gap: ruleOfThree(1112px, 100%, 170px);
    padding: 0 43px;
  }

  &.reverseContainer {
    gap: 40px;
    flex-direction: column;
    justify-content: flex-start;

    @media (min-width: 680px) {
      gap: 63px;
      flex-direction: row-reverse;
      justify-content: flex-end;
    }

    @media (min-width: 900px) {
      gap: ruleOfThree(1112px, 100%, 84.25px);
      flex-direction: row-reverse;
      justify-content: flex-end;
    }
  }

  .capabilities_col {
    &_image {
      width: 100%;

      @media (min-width: 900px) {
        max-width: 429px;
      }

      > div {
        width: 100%;
        height: auto;
      }

      img {
        object-fit: cover;
        display: block;
      }
    }

    &_link {
      display: flex;
      padding-top: 16px;
      &.reverseContainer {
        justify-content: flex-end;
      }
    }

    &_text {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 0px;

      @media (min-width: 480px) {
        gap: 15px;
        flex-direction: row;
      }

      @media (min-width: 680px) {
        flex-direction: column;
      }

      @media (min-width: 900px) {
        max-width: 513px;
        flex-direction: row;
      }

      .nrContainer {
        .medium_text {
          font-family: $font-family-atak-black-italic;
          white-space: pre-line;
          @media (min-width: 560px) {
            font-size: 34px;
            line-height: 36px;
          }
          @media (min-width: 750px) {
            font-size: 38px;
            line-height: 40px;
          }
          @media (min-width: 900px) {
            font-size: 50px;
            line-height: 52px;
          }
        }
      }

      .contentContainer {
        display: flex;
        flex-direction: column;

        &_title {
          margin-bottom: 35px;

          .medium_text {
            color: $main-blue;
            @media (min-width: 560px) {
              font-size: 34px;
              line-height: 36px;
            }
            @media (min-width: 750px) {
              font-size: 38px;
              line-height: 40px;
            }
            @media (min-width: 900px) {
              font-size: 50px;
              line-height: 52px;
            }
          }
        }

        .h6 {
          @media (min-width: 900px) {
            font-size: 21px;
            line-height: 25px;
          }
        }

        &_description_text {
          margin-top: 8px;
          white-space: pre-line;
        }

        .links {
          margin-top: 17px;
          a {
            margin-bottom: 8px;
            display: block;

            @media (max-width: 768px) {
              font-size: 21px;
            }

            &:last-child {
              margin-bottom: 0;
            }
          }
        }
      }
    }
  }
}