.features {
  @extend %container;

  padding-top: 39px;
  padding-bottom: 39px;
}

.features__list {
  @include reset-list;

  display: flex;
  justify-content: space-between;
}

.features__item {
  position: relative;
  flex-shrink: 0;
  width: calc(25% - 22px);
  min-height: 450px;
  padding: 45px 0;
  box-shadow: 10px 0 60px rgba(46, 61, 98, 0.1);
  border-radius: 3px;
  overflow: hidden;

  &:hover {
    background-color: $color-primary-blue;
    .features__text {
      p {
        color: #fff;
      }
    }

    &::after,
    &::before {
      position: absolute;
      content: '';
      display: block;
      width: 191px;
      height: 191px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.1);
    }

    &::before {
      top: 0;
      right: 0;
      transform: translate(50%, -50%);
    }

    &::after {
      bottom: 0;
      left: 0;
      transform: translate(-50%, 50%);
    }
  }
}

.features__img-wrp {
  z-index: 1;
  width: 128px;
  height: 128px;
  margin: 0 auto;

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

.features__text {
  z-index: 1;
  width: 100%;
  max-width: 170px;
  margin: 30px auto 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 34px;
  text-align: center;
  color: $color-primary-blue;

  p {
    margin: 0;
  }
}

@include media('tablet-m') {
  .features__list {
    flex-wrap: wrap;
  }

  .features__item {
    width: calc(50% - 11px);

    &:nth-of-type(n+3) {
      margin-top: 22px;
    }
  }
}

@include media('tablet-s') {
  .features {
    padding-top: 18px;
    padding-bottom: 12px;
  }

  .features__list {
    padding: 0 20px;
  }

  .features__item {
    width: calc(50% - 16px);
    min-height: 225px;
    padding: 15px 16px;

    &:nth-of-type(n+3) {
      margin-top: 43px;
    }
  }

  .features__text {
    margin-top: 22px;
    font-size: 13px;
    line-height: 17px;

    p {
      margin: 0;
    }
  }

  .features__img-wrp {
    width: 64px;
    height: 64px;
  }
}