[IRN-6177] [BpkCardList] Fix issue with carousel alignment

packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.module.scss

@@ -27,10 +27,7 @@
     overflow-x: hidden;
     box-sizing: border-box;
     gap: tokens.bpk-spacing-sm();
-
-    // Negative margin to ensure box-shadow of content is not cut off
-    margin-block: -(tokens.bpk-spacing-lg());
-    padding-block: tokens.bpk-spacing-lg();
+    margin-inline: -1 * tokens.bpk-spacing-md();
     scroll-snap-stop: always;
     scroll-snap-type: x mandatory;
     scrollbar-width: none;
@@ -63,30 +60,32 @@
 
       @include breakpoints.bpk-breakpoint-mobile {
         // On mobile, if there is more than one card in the viewport, the last card only shows partially, so subtract 0.8 when do the calculation
-        flex: 0 0
-          calc(
-            (
-                100% -
-                  (
-                    tokens.bpk-spacing-md() *
-                      (var(--initially-shown-cards, 3) - 1)
-                  )
-              ) /
-              max(1, (var(--initially-shown-cards, 3) - 0.8))
-          );
-
-        &:first-child {
-          padding-left: tokens.bpk-spacing-sm();
-
-          @include utils.bpk-rtl {
-            padding-right: tokens.bpk-spacing-sm();
-            padding-left: tokens.bpk-spacing-md();
-          }
-        }
+        flex-basis: calc(
+          (
+              100% -
+                (
+                  tokens.bpk-spacing-md() *
+                    (var(--initially-shown-cards, 3) - 1)
+                )
+            ) /
+            max(1, (var(--initially-shown-cards, 3) - 0.8))
+        );
       }
     }
   }
 
+  &__row {
+    &__card {
+      flex-basis: calc(
+        (
+            100% -
+              (tokens.bpk-spacing-sm() * (var(--initially-shown-cards, 3) - 1))
+          ) /
+          var(--initially-shown-cards, 3)
+      );
+    }
+  }
+
   &__rail {
     -webkit-overflow-scrolling: touch;
   }