.process {
  &.section {
  }
  &__boxes {
    @extend %d-grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    @include breakpoint(max-xl) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @include breakpoint(max-sm) {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }
  &__box {
    @extend %p-relative, %d-flex, %flex-col;
    border-radius: 14px;
    background: $color-1;
    padding: 40px 24px;
    border: 1px solid rgba($color-primary, 0.08);
    overflow: hidden;
    z-index: 1;

    @include breakpoint(max-md) {
      padding: 25px 20px;
    }

    .icon {
      @include transition($transition);
      color: $color-white;
      width: 48px;
      height: 48px;
      flex-shrink: 0;
    }

    .process-title {
      @include transition($transition);
      margin-top: 40px;

      @include breakpoint(max-lg) {
        margin-top: 30px;
      }
      @include breakpoint(max-md) {
        margin-top: 20px;
      }
    }
    p {
      @extend %flex-grow-1;
      @include transition($transition);
      margin-block: 25px 35px;
      opacity: 0.74;
      @include breakpoint(max-lg) {
        margin-block: 20px 30px;
      }
      @include breakpoint(max-md) {
        margin-block: 15px 20px;
      }
    }
    .shape {
      @extend %p-absolute;
      z-index: -1;
      background-color: $color-primary;
      border-radius: 100%;
      width: 150%;
      height: 150%;
      top: auto;
      bottom: 0%;
      right: auto;
    }
    .agx-btn {
      width: -webkit-max-content;
      width: -moz-max-content;
      width: max-content;
    }
    &:hover {
      .icon {
        color: $color-1;
      }
      .process-title {
        color: $color-1;
      }
      p {
        color: $color-1;
      }
      .agx-btn {
        background-color: $color-1;
        color: $color-white;
      }
    }
  }
}
