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

.logoPartners {
  /* max-width: 1366px; */
  margin: 0 auto;
  background-color: $main-blue;
  padding: 0 16px;

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

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

  .container {
    width: 100%;
    max-width: 1112px;
    margin: 0 auto;

    @media (min-width: 560px) {
      padding: 0 64px;
    }

    @media (min-width: 900px) {
      padding: 0;
    }

    .titleContainer {
      width: 100%;
      padding: 74px 0 32px 0;
      text-align: center;

      @media (min-width: 560px) {
        text-align: left;
        padding: 90px 0 64px 0;
      }

      @media (min-width: 900px) {
        max-width: 844px;
        padding: 120px 0 94px 0;
      }

      h1 {
        font-family: $font-family-newsreader;
        color: $white;
        margin: 0;
      }
    }

    .logosContainer {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0 64px;
      padding-bottom: 10px;

      @media (min-width: 560px) {
        padding-bottom: 120px;
        flex-direction: row;
        justify-content: flex-start;
      }

      @media (min-width: 900px) {
        gap: 0 120px;
      }

      .colLogos:first-child {
        flex: 1 1 ruleOfThree(1112px, 100%, 428px);
      }

      .colLogos:nth-child(2) {
        flex: 1 1 ruleOfThree(1112px, 100%, 428px);
      }

      .colLogos:nth-child(3) {
        flex: 1 1 ruleOfThree(1112px, 100%, 257px);
      }

      .logo {
        margin-bottom: 40px;
        display: flex;
        justify-content: center;
        @media (min-width: 560px) {
          display: block;
          margin-bottom: 54px;
        }
        @media (min-width: 900px) {
          margin-bottom: 64px;
        }

        > img {
          max-height: 40px;
          max-width: 100%;
          @media (min-width: 900px) {
            max-height: 50px;
          }
        }
      }

      .logo:last-child {
        @media (min-width: 900px) {
          margin-bottom: 0;
        }
      }
    }
  }
}