.carousel-container {
  .carousel {
    box-sizing: content-box;
    position: relative;
    // height: 12rem;

    @media #{$breakpoint-large} {
      // height: $height-5;
    }
  }

  .carousel-item {
    position: absolute;
    top: 0;
    left: 0;

    &:not(.active) {
      display: none;
    }

    br {
      line-height: 0.6em;
    }
  }

  .carousel-description {
    max-height: 14rem;
    overflow: hidden;
  }

  .carousel-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30px;

    @include usevar(background, "linear-gradient(" dim-background-transparent "," dim-background ")")
  }

  .carousel-item-small {
    position: absolute;
    top: 0;
    left: 0;

    &:not(.active) {
      display: none;
    }
  }

  .carousel-button {
    border: 1px solid;
    @include usevar(border-color, dimmer-color);
    cursor: pointer;

    transition: all 100ms ease-in-out;

    &:hover {
      @include usevar(background-color, dimmest-color);
    }

    &.active {
      @include usevar(border-color, theme-color);
      @extend .w2;

      &:hover {
        @include usevar(background-color, theme-color-dimmest);
      }
    }
  }
}