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

.subIntroContainer {
  margin: 0 auto 80px;
  padding: 0;

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

  @media (min-width: 900px) {
    padding: 0 43px;
    background-color: $light-blue;
    margin: 0 auto 104px;
  }

  .flag {
    position: absolute;
    top: 20px;
    left: -30px;
    z-index: 0;
    width: 40px;
    img {
      width: 100%;
      mix-blend-mode: hard-light;
    }
  }

  .mobileImage {
    position: relative;
    padding: 0 16px;
    &::before {
      content: '';
      display: block;
      position: absolute;
      top: 84px;
      left: 0;
      z-index: -1;
      width: 100%;
      height: calc(100% - 84px);
      background-color: $light-blue;
      @media (min-width: 560px) {
        top: 50%;
        height: calc(100% - 50%);
      }
    }

    .mobileImageContainer {
      max-width: 461px;
      padding: 0 16px;
      margin: 0 auto;
      width: calc(100% - 5%);
      position: relative;
    }

    img {
      display: block;
      width: 100%;
      margin: 0 auto;
      position: relative;
      z-index: 0;
    }

    .flag {
      left: -14px;
    }
    @media (min-width: 900px) {
      display: none;
    }
  }

  .subIntro {
    width: 100%;
    margin: 0 auto;
    max-width: 1282px;
    background-color: $light-blue;

    @media (min-width: 900px) {
      background-color: transparent;
    }

    .content {
      max-width: 1112px;
      margin: 0 auto;
      padding: 24px 0 54px;

      @media (min-width: 560px) {
        padding: 32px ruleOfThree(618px, 100%, 60px) 54px;
      }

      @media (min-width: 683px) {
        padding: 32px ruleOfThree(704px, 100%, 128px) 54px;
      }

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

      .titleContainer {
        width: 100%;
        max-width: 1112px;
        margin: 0 auto;
        padding: 0 16px;

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

        h2 {
          i,
          em {
            font-family: $font-family-newsreader;
            font-style: italic;
            font-weight: normal;
          }

          p {
            padding: 0;
            margin: 0;
          }
        }
      }

      .container {
        display: flex;
        gap: 85px;
        max-width: 940px;
        margin: 32px auto 0 auto;
        padding: 0 36px;

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

        @media (min-width: 900px) {
          margin: 41px auto 0 auto;
          gap: 127px;
        }

        .firstCol {
          width: 100%;
          display: flex;
          flex-direction: column;
          gap: 24px;

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

          .title {
            margin-bottom: 8px;
          }

          .description {
            margin-bottom: 24px;
          }

          .h6 {
            white-space: pre-line;
          }
        }

        .secondCol {
          width: 100%;
          display: none;
          position: relative;

          @media (min-width: 900px) {
            display: block;
            max-width: 386px;
          }

          > img {
            width: 100%;
            max-width: 429px;
            position: relative;
            z-index: 0;
          }
        }
      }
    }
  }
}