.section-features {
  $mobile-size: 800px;

  .container {
    padding: 100px 0;
    max-width: 1000px;
  }

  .feature-item {
    @media (min-width: $mobile-size + 1px) {
      display: flex;
    }

    + .feature-item {
      padding: 100px 0 0;

      @media (max-width: $mobile-size) {
        padding: 70px 0 0;
      }
    }

    &:nth-child(3n+1) .content-col {
      background: #A5B5AA;
    }

    &:nth-child(3n+2) .content-col {

      background: #6C6B7A;
    }

    &:nth-child(3n+3) .content-col {
      background: #296F8C;
    }

    @media (min-width: $mobile-size + 1px) {
      &:nth-child(even) {
        flex-direction: row-reverse;
        .img-col {
          .img-wrap {
            right: auto;
            left: 0;
          }
        }
      }
    }

    .title {
      font-size: 30px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      padding: 20px;
      display: inline-block;
    }

    .desc {
      line-height: 1.3;
      letter-spacing: .5px;
      padding: 10px 0 0;

      p + p {
        margin: 20px 0 0;
      }
    }

    .content-col {
      color: white;
      padding: 20px 50px 50px;
      z-index: 1;
      position: relative;

      @media (max-width: $mobile-size) {
        padding: 30px;
      }

      @media (min-width: $mobile-size + 1px) {
        width: 50%;
      }
    }

    .img-col {
      position: relative;

      @media (min-width: $mobile-size + 1px) {
        width: 50%;
      }

      @media (max-width: $mobile-size) {
        min-height: 400px;
      }

      .img-wrap {
        position: absolute;
        right: 0;
        top: -20px;
        width: calc(100% + 40px);
        height: calc(100% + 40px);

        @media (max-width: $mobile-size) {
          right: -20px;
        }


        &:before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.15);
        }
      }
    }
  }
}