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

.related {
  display: flex;
  padding: 0 16px;
  margin: 0 auto 40px;
  gap: 170px;
  max-width: 640px;

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

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

  .container {
    @media (min-width: 900px) {
      width: 55%;
    }

    @media (min-width: 980px) {
      width: 50%;
    }

    .title {
      margin-bottom: 16px;
    }

    .titleText {
      margin-bottom: 16px;
      max-width: 340px;

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

  & + div[class*='related'] {
    margin-bottom: 80px;
    padding-left: 70px;
    @media (min-width: 900px) {
      margin: 0 auto 168px;
    }
  }
}

.reverseContainer {
  flex-direction: row-reverse;
}