.block-filter {
  margin-bottom: 20px;

  @include breakpoint-down('deskL') {
    margin-bottom: 6px;
  }

  @include breakpoint-down('tabM') {
    margin-bottom: 32px;
  }

  .container {
    padding: 32px 0 24px;
    border-bottom: 1px solid rgba(50, 50, 50, 0.05);

    @include breakpoint-down('deskL') {
      padding: 24px 0;
    }

    @include breakpoint-down('tabM') {
      padding: 16px 0 0;
    }
  }

  &__title {
    margin-bottom: 20px;
    font-size: 15px;

    @include breakpoint-down('deskL') {
      margin-bottom: 16px;
    }

    @include breakpoint-down('deskS') {
      margin-bottom: 8px;
    }

    @include breakpoint-down('tabM') {
      font-size: 12px;
      line-height: 16px;
    }
  }

  &__items {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  &__item {
    display: block;
    padding: 6px 20px;
    border: 1px solid #141414;
    border-radius: 40px;
    margin-right: 16px;
    cursor: pointer;
    transition: .4s ease-in-out;

    @include breakpoint-down('deskS') {
      font-size: 12px;
      line-height: 16px;
      transition: .1s;
    }

    @include breakpoint-down('tabM') {
      margin-bottom: 16px;
    }

    &:last-of-type {
      margin-right: 0;
    }

    &:hover {
      border: 1px solid #E62334;
    }

    &.active {
      background: #E62334;
      border-radius: 40px;
      border: 1px solid #E62334;
      color: $white;
      pointer-events: none;
    }
  }
}