.feature {
  &.section {
  }
  &__wrapper {
    border-radius: 20px;
    padding: 20px;
  }
  &__thumb {
    @extend %p-relative;
    border-radius: 20px;
    overflow: hidden;

    @include breakpoint(lg) {
      max-width: 570px;
      width: 100%;
    }
  }
  &__review {
    @extend %p-absolute, %d-flex, %item-center;
    gap: 30px;
    left: 10px;
    bottom: 10px;
    background-color: $color-primary;
    color: $color-1;
    border-radius: 20px;
    padding: 20px 25px;

    svg {
      width: 65px;
      height: 65px;
      @include breakpoint(max-lg) {
        width: 50px;
        height: 50px;
      }
    }
    .review-content {
      .total-review {
        color: inherit;
        @extend %d-flex, %item-center;
        line-height: 1;

        > * {
          line-height: inherit;
          font-size: inherit;
        }
      }
      .info {
        font-size: $fs-16;
      }
    }

    @include breakpoint(max-lg) {
      gap: 20px;
      border-radius: 10px;
      padding: 15px 20px;
    }
  }
  &__content {
    .section-title {
      @include breakpoint(lg) {
        font-size: 55px;
      }
      margin-bottom: 35px;
      @include breakpoint(max-md) {
        font-size: 25px;
      }
    }

    p {
      max-width: 519px;
    }
    .feature-list {
      @extend %d-flex, %flex-wrap;
      column-gap: 30px;
      row-gap: 20px;
      max-width: 450px;
      margin-block: 20px 30px;

      @include breakpoint(max-sm) {
        column-gap: 15px;
        row-gap: 10px;
      }

      span {
        @extend %d-flex, %item-center;
        gap: 15px;
        color: $color-white;
        font-size: 16px;

        svg {
          color: $color-primary;
        }
      }
    }
  }
}
