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

.imagesContainer {
  display: flex;
  max-width: 1366px;
  margin: 0 auto 40px;
  padding: 0 16px;
  flex-direction: column;

  .noPadding {
    padding: 0;
  }

  img {
    display: block;
  }

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

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

  & + div[class*='teamShareContainer'] {
    margin-top: -40px;
  }

  &:first-of-type {
    margin-bottom: 24px;
  }
}

.half_width {
  flex-direction: row;
  .content {
    display: block;
    width: 50%;
    margin: 0 auto;

    > div {
      img {
        width: calc(100% + 40px);
        height: auto;
        object-fit: cover;
        max-height: 628px;
      }
      > img {
        width: 100%;
      }
    }
  }
}

.one_third_width {
  gap: 24px;
  flex-direction: row;

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

  > div {
    @media (max-width: 768px) {
      max-width: calc(100% - 152px);
      overflow: visible;
    }
  }

  .content {
    display: flex;
    width: 100%;

    &.contentSlide {
      display: block;
    }

    @media (min-width: 769px) {
      max-width: 399px;
    }

    > div {
      height: 100%;

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

.thirty_seventy_width {
  gap: 24px;

  @media (min-width: 560px) {
    flex-direction: row;
    gap: ruleOfThree(1280px, 100%, 40px);
  }

  .content {
    width: 100%;
    max-width: 840px;

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

    > div {
      height: 100%;
      img {
        object-fit: cover;
        max-height: 628px;
        height: 100%;
      }
      > img {
        width: 100%;
      }
    }
  }

  > .content:first-child {
    width: calc(100% - 89px);
    max-width: 536px;
    margin: 0;
    padding: 0 16px;
    align-self: center;

    @media (min-width: 560px) {
      align-self: flex-start;
      padding: 0;
      max-width: ruleOfThree(1280px, 100%, 400px);
    }
  }
}

.seventy_thirty_width {
  gap: 24px;

  @media (min-width: 560px) {
    flex-direction: row;
    gap: ruleOfThree(1280px, 100%, 40px);
  }

  .content {
    width: calc(100% - 89px);
    max-width: 536px;
    margin: 0;
    padding: 0 16px;
    align-self: center;

    @media (min-width: 560px) {
      align-self: flex-start;
      padding: 0;
      max-width: ruleOfThree(1280px, 100%, 400px);
    }

    > div {
      height: 100%;
      img {
        object-fit: cover;
        max-height: 628px;
        height: 100%;
      }
      > img {
        width: 100%;
      }
    }
  }

  > .content:first-child {
    width: 100%;
    max-width: 840px;
    padding: 0;

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

.full_width {
  .content {
    width: 100%;
    img {
      width: 100%;
      height: auto;
      object-fit: cover;
      min-height: 100vh;
      max-height: 682px;
    }

    > div {
      width: 100%;
    }
  }
}

.large_width {
  display: flex;
  flex-direction: row-reverse;
  max-width: 1198px;

  .content {
    max-width: 941px;
    width: 100%;

    img {
      width: 100%;
      height: auto;
      object-fit: cover;
      max-height: 682px;
    }
  }
}