.carousel--photo {
  .banner__slide,
  .slick-slide {
    position: relative;
  }
}

.carousel__dots--photo {
  height: $baseline * 5;
  position: absolute;
  top: 150px;
  width: 100%;
  z-index: 1;

  .slick-dots {
    bottom: $spacing--xs !important; // overwrite inline bottom style
    // viewport l
    @include viewport--l {
      bottom: $spacing--m !important; // overwrite inline bottom style
    }
  }
  .slick-dots.dark {
    button::before {
      border-color: $carousel-photo-slick-dots-color-dark;
    }

    button:hover::before {
      border-color: $carousel-photo-slick-dots-color-dark-hover;
    }

    .slick-active button::before {
      background: $carousel-photo-slick-dots-color-dark-active;
    }
  }
}

// viewport l
@include viewport--l {
  .carousel--photo {
    position: relative;

    .slick-track {
      display: flex !important; // overwrite inline display style
    }

    .slick-slide {
      height: auto !important; // overwrite inline height style
      > div {
        height: 100%;
      }
    }

    .banner__slide,
    .banner__wrapper {
      height: 100%;
    }
  }
  // reposition dots to bottom of slider
  .carousel__dots--photo {
    bottom: 0;
    top: auto !important; // overwrite inline top style
  }
}