[FIX] website: fix small layout issues in carousel on mobile

-Remove arrows on mobile because it's too big and hide the content.
 User will use the touch screen to make the carousel move.
-Bordered style: Reduce the borders on mobile.

Part of #55857

task-2318526

X-original-commit: 86cd5e89

addons/website/static/src/scss/website.scss

@@ -479,6 +479,12 @@ table.table_desc tr td {
         width: 8%;
         opacity: 1;
     }
+    @include media-breakpoint-down(sm) {
+        .carousel-control-prev,
+        .carousel-control-next {
+            display: none; // remove arrows on mobile
+        }
+    }
     .carousel-control-prev { justify-content: flex-start; }
     .carousel-control-next { justify-content: flex-end; }
     .carousel-control-prev-icon,
@@ -534,6 +540,9 @@ table.table_desc tr td {
     // Border
     &.s_carousel_bordered {
         border: 2rem solid rgba(0,0,0,0);
+        @include media-breakpoint-down(sm) {
+            border: 0.5rem solid rgba(0,0,0,0);
+        }
         // Controls - caret
         .carousel-control-prev-icon:before { content: "\f0d9"; }
         .carousel-control-next-icon:before { content: "\f0da"; }