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

.imageTitleTextAndLink {
  max-width: 1198px;
  width: 100%;
  padding: 0 16px;
  margin: 0 auto 80px;
  display: flex;

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

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

  .container {
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
    padding: 0;
    @media (min-width: 560px) {
      padding: 0 64px;
    }
    @media (min-width: 900px) {
      padding: 0;
      flex-direction: row;
      gap: 86px;
    }

    &.reverseContainer {
      flex-direction: column-reverse;
      @media (min-width: 900px) {
        flex-direction: row-reverse;
      }
    }

    &.center {
      justify-content: center;
      .imageTitleTextAndLink_col {
        &_image {
          align-self: flex-end;
          @media (min-width: 560px) and (max-width: 899px) {
            max-width: 384px;
          }
        }
      }
      .imageTitleTextAndLink_col_text {
        padding-left: 0;

        @media (min-width: 560px) and (max-width: 899px) {
          max-width: 428px;
        }
      }
      a {
        @media (min-width: 560px) and (max-width: 899px) {
          display: table;
        }
      }
    }

    &.right {
      justify-content: flex-end;
      flex-direction: column-reverse;

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

      &.reverseContainer {
        justify-content: flex-start;
      }
    }

    &.left {
      justify-content: flex-end;

      @media (min-width: 900px) {
        flex-direction: row-reverse;
        .imageTitleTextAndLink_col_text {
          padding-left: 0;
        }
      }

      &.reverseContainer {
        justify-content: flex-end;

        .imageTitleTextAndLink_col {
          &_image {
            align-self: flex-start;
          }
        }
        .imageTitleTextAndLink_col_text {
          padding-left: 0;

          @media (min-width: 560px) and (max-width: 899px) {
            max-width: ruleOfThree(608px, 100%, 448px);
          }
        }
      }
    }
    .imageTitleTextAndLink_col {
      &_image {
        width: 100%;

        @media (min-width: 560px) {
          max-width: 100%;
        }

        @media (min-width: 900px) {
          max-width: ruleOfThree(768px, 100%, 600px);
        }

        &.small {
          @media (min-width: 560px) {
            max-width: 448px;
          }

          @media (min-width: 900px) {
            max-width: ruleOfThree(1198px, 100%, 384px);
            min-width: 384px;
          }
        }

        &.big {
          @media (min-width: 560px) {
            width: ruleOfThree(1198px, 100%, 600px);
          }
        }

        > img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      &_text {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 0;

        @media (min-width: 900px) {
          padding-left: ruleOfThree(1198px, 100%, 86px);
        }

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

        .textContainer {
          @media (min-width: 900px) {
            margin: 0 auto;
          }
        }

        .medium_text {
          color: $main-blue;
          margin-bottom: 16px;
          @media (min-width: 560px) {
            font-size: 50px;
            line-height: 52px;
          }
        }

        .text_5_white {
          color: $main-blue;
        }

        .actionContainer {
          color: $medium-blue;
          margin-top: 32px;

          .actionContainer__elements {
            display: flex;
            align-items: center;

            > img {
              width: 126px;
              height: 11px;
              margin-right: 10px;
            }
          }
        }
      }
    }
  }

  & + .imageTitleTextAndLink {
    .container {
      &.right {
        @media (min-width: 560px) {
          padding-left: 128px;
          padding-right: 0;
        }

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