.range-types {
  .nav-tabs {
    margin-left: auto;
    margin-right: auto;

    @include media-breakpoint-down(sm) {
      width: auto;
    }
  }

  .tab-content {
    padding-left: 0;
    padding-right: 0;

    @include media-breakpoint-down(sm) {
      border-bottom: 1px solid $gray; //TODO: fix this in all tabs components
    }
  }

  .tabs_ranges {
    margin-bottom: 10px;
  }

  &__card-container {
    @include make-col-ready;
    @include make-col(4);

    @include media-breakpoint-down(sm) {
      @include make-col(12);
    }
  }

  &__tab {
    .range-types__card-container:not(:nth-child(-n+3)) {
      display: block;
    }
  }

  &__tab_open {
    .range-types__card-container:not(:nth-child(-n+3)) {
      display: none;
    }
  }

  &__actions {
    text-align: center;
  }

  &__load-button {
    min-width: 125px;

    &_more {
      padding-right: 38px;
    }

    .icon-more {
      position: absolute;
      top: 5px;
      right: 8px;
    }
  }
}