.partner {
  &.section {
  }
  &__box {
    @include transition($transition);
    @extend %d-flex, %item-center;
    gap: 25px;
    border-radius: 10px;
    background: $color-2;
    color: $color-white;
    padding: 13px 20px;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;

    @include breakpoint(max-sm) {
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
    }

    .icon {
      @extend %p-relative;
      width: 43px;
      height: 43px;
      @extend %shrink-0, %d-grid, %place-center;
      img {
        @include transition($transition);
        &:nth-of-type(2) {
          @extend %p-absolute;
          inset: 0;
          opacity: 0;
        }
      }
    }

    &:hover,
    &.active {
      @include transform(rotate(-3deg));
      background-color: $color-primary;
      color: $color-1;

      @include breakpoint(max-sm) {
        -webkit-transform: rotate(-1.3deg);
        -ms-transform: rotate(-1.3deg);
        transform: rotate(-1.3deg);
      }

      .icon {
        img {
          @include transition($transition);
          &:nth-of-type(1) {
            opacity: 0;
          }
          &:nth-of-type(2) {
            opacity: 1;
          }
        }
      }
    }
  }
}
