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

.workDoneContainer {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  padding: 0 16px;
  max-width: 1366px;

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

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

  .noPadding {
    padding: 0;
  }

  .containerItem {
    margin-bottom: 40px;
    width: 100%;

    @media (min-width: 560px) {
      max-width: calc(50% - 32px);
      margin-right: 32px;
      margin-bottom: 80px;
    }

    @media (min-width: 900px) {
      margin-bottom: 129px;
      width: ruleOfThree(1280px, 100%, 428px);
      max-width: 428px;
      margin-right: 0;
      margin-left: ruleOfThree(1280px, 100%, 86px);
    }

    a {
      > div {
        margin-bottom: 40px;
        height: auto;
      }
    }

    img {
      display: block;
    }

    .content {
      .contentTitle {
        margin-bottom: 16px;

        h4 {
          @media (max-width: 561px) {
            font-size: 24px;
            line-height: 29px;
          }
        }
      }

      .chevron {
        width: 4.88px;
        height: 8.92px;
        margin-right: 3px;
      }

      .keywords {
        margin-bottom: 32px;
        color: $main-blue;
        font-family: $font-family-newsreader;
        line-height: 22px;
      }
    }

    &.containerItemBig {
      width: 100%;

      @media (min-width: 560px) and (max-width: 899px) {
        margin-right: 0;
        margin-left: 32px;
      }

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

      &.containerItemBigWithoutMargin {
        margin-left: 0;

        @media (min-width: 560px) and (max-width: 899px) {
          margin-right: 32px;
          margin-left: 0;
        }

        & + .containerItem {
          @media (min-width: 560px) and (max-width: 899px) {
            margin-right: 0;
            margin-left: 32px;
          }
        }
      }
    }
  }
  > div[class*='case'] {
    > div {
      padding: 24px 0;

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

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

      > div {
        > a {
          &:first-child {
            div {
              @media (max-width: 561px) {
                font-size: 24px;
                line-height: 29px;
              }
            }
          }
        }
      }
    }
  }
}