.icon-teaser {
  @extend .container;

  max-width: map_get($container-max-widths,lg);
}

.icon-teaser__items {
  @include unstyle-list();
  @include make-row();

  padding-top: 64px;

  @include media-breakpoint-up(lg) {
    padding-top: 0;
  }
}

.icon-teaser__item {
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }

  text-decoration: none;
  outline: none;

  display: flex !important;
  flex-direction: column;
  align-items: center;

  padding-top: 48px;
  padding-bottom: 48px;
}

.icon-teaser__item__icon-wrapper {
  flex-grow: 0;
  justify-content: center;

  display: flex;
  align-items: center;
  flex-shrink: 0;

  height: 80px;
  width: 80px;
  border: 2px solid $color-blue-gray--light;
  border-radius: 40px;

  background: $color-white;
}

.icon-teaser__item__icon {
  @extend .icon;

  height: 32px;
  width: 32px;

  color: $color-blue;
}

.icon-teaser__item__title {
  @extend .make-font-medium-semibold;

  padding: 24px 0 16px 0;

  color: $color-blue-gray;
}

.icon-teaser__item__text {
  @extend .make-font-heading-tertiary;

  flex-grow: 1;
  text-align: center;

  max-width: 300px;
  padding-bottom: 32px;
}

.icon-teaser__item__action {
  @extend .make-font-medium-semibold;
  @include make-link($color-gray--darker,$color-blue)

  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  padding: 15px 32px;
  margin: 0;

  background: $color-white;
  border: 2px solid $color-blue-gray--light;
  transition: all $transition-fast;

  @include media-breakpoint-up(lg) {
    padding: 13px 32px 14px;
  }

  &:hover, &:focus {
    background: $color-white;
    border-color: $color-blue;
    color: $color-blue;
  }
}

.icon-teaser__item__action2 {
  flex-shrink: 0;
  margin: 0;
}

.icon-teaser .slick-dots {
  display: flex;
  flex-wrap: nowrap;

  width: 100%;
  height: 64px;

  margin: 0;
  padding: 0;

  position: absolute;
  top: 0;

  background-color: $color-white;

  @include media-breakpoint-up(lg) {
    display: none;
  }

  li {
    flex-grow: 1;
    height: 100%;
    margin: 0;
    padding: 0;

    list-style-type: none;

    .icon-teaser__link {
      @include make-link($color-gray--darker,$color-blue)

      display: flex;
      justify-content: center;
      align-items: flex-end;
      height: 100%;
      width: 100%;

      padding: 8px $grid-gutter-width-base/2;

      text-align: center;
      font-size: 14px;
      font-weight: 600;
      border-bottom: 5px solid transparent;
      outline: none;
      transition: all .25s ease;
    }
  }

  .icon-teaser__link:hover,
  li.slick-active .icon-teaser__link {
    border-color: $color-blue;
    color: $color-blue;
  }
}