ui(FO | Main Page | Slider): fix slider display on all devices. Prest…

…aShop#9614

themes/classic/_dev/css/components/imageslider.scss

@@ -6,42 +6,26 @@
   }
   .carousel-inner {
     height: 340px;
-    @media (max-width: 767px) {
-      height: auto;
-    }
   }
   .carousel-item {
     height: 100%;
     img {
-      @media (max-width: 767px) {
-        max-width: 100%;
-        height: auto;
-      }
-      @media (min-width: 768px) {
       width: 100%;
-      margin-left: 0;
-    }
+      max-width: 100%;
+      height: auto;
     }
     .caption {
       position: absolute;
-      @media (min-width: 768px) {
       bottom: 28px;
       left: 90px;
-      }
-      @media (max-width: 767px) {
-        bottom: 5px;
-        left: 40px;
-      }
       color: white;
       max-width: 340px;
       .caption-description p {
         color: white;
       }
     }
     figure {
-      @media (max-width: 767px) {
-        margin: 0;
-      }
+      margin: 0;
     }
   }
   .carousel-control {
@@ -73,3 +57,52 @@
     }
   }
 }
+
+@include media-breakpoint-down(lg) {
+  .carousel {
+    .carousel-inner {
+      height: auto;
+    }
+  }
+}
+
+@include media-breakpoint-down(md) {
+  .carousel {
+    .carousel-item {
+      .caption {
+        bottom: calc(50% - 2rem);
+        left: 10%;
+      }
+      .caption {
+        .display-1 {
+          font-size: 2rem;
+        }
+      }
+      .caption-description {
+        display: none;
+      }
+    }
+  }
+}
+
+@include media-breakpoint-down(sm) {
+  .carousel {
+    .carousel-item {
+      .caption {
+        bottom: calc(50% - 1.5rem);
+      }
+      .caption {
+        .display-1 {
+          font-size: 1.5rem;
+        }
+      }
+    }
+    .carousel-control {
+      .icon-prev, .icon-next {
+        i {
+          font-size: 2rem;
+        }
+      }
+    }
+  }
+}