diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 625ab1c8de..fdfcd87e3a 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -7,76 +7,77 @@
   position: relative;
   width: 100%;
   overflow: hidden;
+}
 
-  > .carousel-item {
-    position: relative;
-    display: none;
-    transition: .6s ease-in-out left;
+.carousel-item {
+  position: relative;
+  display: none;
+  transition: .6s ease-in-out left;
 
-    // Account for jankitude on images
-    > img,
-    > a > img {
-      @extend .img-fluid;
-      line-height: 1;
-    }
-
-    // CSS3 transforms when supported by the browser
-    @include if-supports-3d-transforms() {
-      transition: transform .6s ease-in-out;
-      backface-visibility: hidden;
-      perspective: 1000px;
-
-      &.next,
-      &.active.right {
-        left: 0;
-        transform: translate3d(100%, 0, 0);
-      }
-      &.prev,
-      &.active.left {
-        left: 0;
-        transform: translate3d(-100%, 0, 0);
-      }
-      &.next.left,
-      &.prev.right,
-      &.active {
-        left: 0;
-        transform: translate3d(0, 0, 0);
-      }
-    }
+  // Account for jankitude on images
+  > img,
+  > a > img {
+    @extend .img-fluid;
+    line-height: 1;
   }
 
-  > .active,
-  > .next,
-  > .prev {
+  // CSS3 transforms when supported by the browser
+  @include if-supports-3d-transforms() {
+    transition: transform .6s ease-in-out;
+    backface-visibility: hidden;
+    perspective: 1000px;
+
+    &.carousel-item-next,
+    &.active.carousel-item-right {
+      left: 0;
+      transform: translate3d(100%, 0, 0);
+    }
+    &.carousel-item-prev,
+    &.active.carousel-item-left {
+      left: 0;
+      transform: translate3d(-100%, 0, 0);
+    }
+    &.carousel-item-next.carousel-item-left,
+    &.carousel-item-prev.carousel-item-right,
+    &.active {
+      left: 0;
+      transform: translate3d(0, 0, 0);
+    }
+  }
+}
+
+  .carousel-item.active,
+  .carousel-item-next,
+  .carousel-item-prev {
     display: block;
   }
 
-  > .active {
+  .carousel-item.active {
     left: 0;
   }
 
-  > .next,
-  > .prev {
+  > .carousel-item-next,
+  > .carousel-item-prev {
     position: absolute;
     top: 0;
     width: 100%;
   }
 
-  > .next {
+  > .carousel-item-next {
     left: 100%;
   }
-  > .prev {
+  > .carousel-item-prev {
     left: -100%;
   }
-  > .next.left,
-  > .prev.right {
+  > .carousel-item-next.carousel-item-left,
+  > .carousel-item-prev.carousel-item-right {
     left: 0;
   }
 
-  > .active.left {
+  > .active.carousel-item-left {
     left: -100%;
   }
-  > .active.right {
+  > .active.carousel-item-right {
     left: 100%;
   }
 }
@@ -101,10 +102,11 @@
   // animation if you trip this while in the middle of another animation.
 
   // Set gradients for backgrounds
-  &.left {
+  &.carousel-item-left {
     @include gradient-x($start-color: rgba(0,0,0,.5), $end-color: rgba(0,0,0,.0001));
   }
-  &.right {
+
+  &.carousel-item-right {
     right: 0;
     left: auto;
     @include gradient-x($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.5));