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

.meetUsContainer {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-width: 1366px;
  padding: 0 16px;
  margin: 0 auto 120px;

  @media (min-width: 560px) {
    padding: 0 32px;
    flex-direction: row-reverse;
  }

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

  > div {
    &:first-child {
      width: 100%;
      @media (min-width: 769px) {
        height: auto;
        max-width: ruleOfThree(1280px, 100%, 812px);
      }
    }
  }

  img {
    object-fit: cover;
  }

  .container {
    display: flex;
    align-self: flex-start;
    justify-content: flex-start;
    background: $dark-blue;
    width: 100%;

    @media (min-width: 769px) {
      max-width: ruleOfThree(1280px, 100%, 468px);
    }
  }

  .content {
    color: $white;
    display: flex;
    align-self: center;
    flex-direction: column;
    padding: 51px 56px;
    width: 100%;

    @media (min-width: 769px) {
      justify-content: center;
      padding: 100px 56px;
    }

    @media (min-width: 1281px) {
      padding: 113px 102px;
    }

    .medium_text {
      max-width: 257px;
      width: 100%;
      margin: 0;
      padding: 0;
      color: $white;
      text-align: left;
    }

    .text_5 {
      max-width: 262px;
      color: $white;
      margin: 22px 0 37px 0;
      padding: 0;
      font-family: $font-family-atak-light;
      white-space: pre-line;
      line-height: 10.5px;

      @media (min-width: 560px) and (max-width: 768px) {
        font-size: 21px;
        line-height: 15px;
        margin: 22px 0 41px 0;
      }
    }
  }
}