Big Tabs

<ul class="nav nav-tabs nav-tabs--vcbs-big" role="tablist">
    <li role="presentation" class="active">
        <a href="#tabpanel-1" aria-controls="tabpanel-1" role="tab" data-toggle="tab">Tab 1</a>
    </li>
    <li role="presentation">
        <a href="#tabpanel-2" aria-controls="tabpanel-2" role="tab" data-toggle="tab">Tab 2</a>
    </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="tabpanel-1">Tab 1 Panel</div>
    <div role="tabpanel" class="tab-pane" id="tabpanel-2">Tab 2 Panel</div>
</div>

.nav-tabs--vcbs-big {
  display: flex;
  align-items: flex-end;
  overflow: auto hidden;
  margin-bottom: 1.6rem;

  > li {
    > a {
      @include typeTitle(true);
      text-transform: uppercase;
      color: $color-grey-dark;
      border: none;
      padding: 1.2rem;
      white-space: nowrap;

      @media (min-width: $breakpoint-tablet) {
        @include typeDisplay(true);
      }

      @media (min-width: $breakpoint-tablet) {
        padding-left: 2.4rem;
        padding-right: 2.4rem;
      }

      &:hover,
      &:focus {
        color: $color-base-blue;
        background-color: transparent;
      }
    }

    &.active > a {
      &,
      &:hover,
      &:focus {
        color: $color-base-blue;
        background-color: transparent;
        border: none;
        border-bottom: 0.4rem solid $color-base-blue;
        border-color: $color-base-blue;
      }
    }
  }
}

.form-select {
  position: relative;
  margin-bottom: 1.6rem;
}

.form-select__ctrl {
  @include typeBody(true);
  height: 4rem;
  max-width: 100%;
  padding: 0.8rem 2.4rem 0.8rem 1.2rem;
  color: $color-base-blue;
  border: 1px solid $color-grey-light;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6.2 6.5 3.8 3.9 3.8-3.9L15 7.7l-5 5-5-5 1.2-1.2Z' fill='%239999A5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 2rem;
  background-color: $color-base-white;

  .form-select--has-icon & {
    padding-left: 3.2rem;
  }
}

.form-select__icon {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: $color-blue-medium;
  width: 4rem;
  height: 4rem;
}

// If there are sliders/carousels within panels, render them on tab change
$('.js-big-tabs a[data-toggle="tab"]')
  .on("click", function (e) {
    e.preventDefault();
    $(this).tab("show");
  })
  .on("shown.bs.tab", function () {
    $(".slick-slider").slick("setPosition");
  });