.block-card-fees {
  inline-size: 100%;
  background-color: $color-white;
  overflow: hidden;

  .grid-container {
    display: flex;
    flex-direction: column;
    row-gap: $spacing-lg;
  }

  &__title {
    width: 100%;
    max-width: $width-md;
    margin: auto;
    text-align: center;
  }

  &__content {
    position: relative;
    display: flex;
    gap: var(--gap);
    flex: 1;

    @include media-down(lg) {
      flex-direction: column;
    }
    
    &-wrap {
      display: flex;
      width: fit-content;
      flex-wrap: nowrap;
    }

    &-arrows {
      display: contents;

      &:has(.lock) {
        display: none;
      }

      .arrows-prev,
      .arrows-next {
        position: absolute;
        display: flex;
        top: calc(50% - 21px);
        width: 42px;
        height: 42px;
        border: 1px solid $color-black;
        border-radius: 2px;
        background-color: $color-white;
        align-self: center;
        justify-content: center;
        align-items: center;
        flex: 0 0 auto;
        @include btn-hover($color-accent--hover);

        @include media-down(md) {
          top: 86px;
        }

        &.disabled {
          opacity: 0.2;
        }
      }

      .arrows-prev {
        left: -21px;
        @include icon('@/Images/icons/chevron-left.svg', 16px);
      }

      .arrows-next {
        right: -21px;
        @include icon('@/Images/icons/chevron-right.svg', 16px);
      }
    }

    &:has(.block-card-fees__content-wrap) {
      .card {
        min-width: occupies(4, 0);
        margin-right: var(--gap);

        &:last-child {
          margin-right: 0;
        }
      }
    }

    .card {
      flex: 1 0 0;
      padding: $spacing-xl $spacing-xxxl;
      background-repeat: no-repeat;
      background-size: auto 100%;

      &-txt {
        width: 100%;
        max-width: $width-md;
      }

      @for $i from 1 through 3 {
        &:nth-child(3n + #{$i - 1}) {
          background-image: url('@/Images/brush#{$i}.svg');
          @if $i == 3 {
            background-position: left;
          } @else {
            background-position: right;
          }
        }
      }

      &.bg-color-white {
        border: 1px solid $color-black20;
      }

      @include media-down(md) {
        padding: $spacing-smd $spacing-lg;
      }
    }
  }

  &__button {
    display: flex;
    justify-content: center;
  }

  @include media-up(lg) {
    &--70-30 & {
      &__content {
        &:has(> .card:nth-child(2):last-child) {
          .card:last-child {
            flex: 0 0 auto;
            width: calc(35% - var(--half-gap));
          }
        }
      }
    }

    &--30-70 & {
      &__content {
        &:has(> .card:nth-child(2):last-child) {
          .card:first-child {
            flex: 0 0 auto;
            width: calc(35% - var(--half-gap));
          }
        }
      }
    }
  }
}