@fundamental-styles/theming-preview 0.23.0-rc.3 → 0.23.0-rc.4

package/fundamental-styles.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Fundamental Library Styles v0.23.0-rc.3
+ * Fundamental Library Styles v0.23.0-rc.4
  * Copyright (c) 2022 SAP SE or an SAP affiliate company.
  * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)
  */
@@ -11637,13 +11637,16 @@ fd-carousel:focus {
 }
 .fd-container.fd-container--no-gap .fd-row .fd-col,
 .fd-container.fd-container--no-vertical-gap .fd-row .fd-col {
-  padding-top: 0
+  padding-top: 0;
+  padding-bottom: 0
 }
 .fd-container[dir=rtl],
 [dir=rtl] .fd-container {
   direction: rtl
 }
 .fd-row {
+  margin-left: -.25rem;
+  margin-right: -.25rem;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -11653,15 +11656,11 @@ fd-carousel:focus {
   -ms-flex: 0 0 100%;
   flex: 0 0 100%;
   position: relative;
-  margin-left: -.25rem;
-  margin-right: -.25rem;
   min-width: calc(100% + .25rem * 2)
 }
-.fd-row:first-child {
-  margin-top: -.5rem
-}
 .fd-row .fd-col {
-  padding-top: .5rem
+  padding-top: .25rem;
+  padding-bottom: .25rem
 }
 .fd-col {
   padding: 0 .25rem;
@@ -11677,8 +11676,8 @@ fd-carousel:focus {
 }
 .fd-col--offset-0[dir=rtl],
 [dir=rtl] .fd-col--offset-0 {
-  margin-left: 0;
-  margin-right: 0
+  margin-right: 0;
+  margin-left: 0
 }
 .fd-col--offset-after-0 {
   margin-right: 0
@@ -11697,8 +11696,8 @@ fd-carousel:focus {
 }
 .fd-col--offset-1[dir=rtl],
 [dir=rtl] .fd-col--offset-1 {
-  margin-left: 0;
-  margin-right: 8.3333333333%
+  margin-right: 8.3333333333%;
+  margin-left: 0
 }
 .fd-col--offset-after-1 {
   margin-right: 8.3333333333%
@@ -11717,8 +11716,8 @@ fd-carousel:focus {
 }
 .fd-col--offset-2[dir=rtl],
 [dir=rtl] .fd-col--offset-2 {
-  margin-left: 0;
-  margin-right: 16.6666666667%
+  margin-right: 16.6666666667%;
+  margin-left: 0
 }
 .fd-col--offset-after-2 {
   margin-right: 16.6666666667%
@@ -11737,8 +11736,8 @@ fd-carousel:focus {
 }
 .fd-col--offset-3[dir=rtl],
 [dir=rtl] .fd-col--offset-3 {
-  margin-left: 0;
-  margin-right: 25%
+  margin-right: 25%;
+  margin-left: 0
 }
 .fd-col--offset-after-3 {
   margin-right: 25%
@@ -11757,8 +11756,8 @@ fd-carousel:focus {
 }
 .fd-col--offset-4[dir=rtl],
 [dir=rtl] .fd-col--offset-4 {
-  margin-left: 0;
-  margin-right: 33.3333333333%
+  margin-right: 33.3333333333%;
+  margin-left: 0
 }
 .fd-col--offset-after-4 {
   margin-right: 33.3333333333%
@@ -11777,8 +11776,8 @@ fd-carousel:focus {
 }
 .fd-col--offset-5[dir=rtl],
 [dir=rtl] .fd-col--offset-5 {
-  margin-left: 0;
-  margin-right: 41.6666666667%
+  margin-right: 41.6666666667%;
+  margin-left: 0
 }
 .fd-col--offset-after-5 {
   margin-right: 41.6666666667%
@@ -11797,8 +11796,8 @@ fd-carousel:focus {
 }
 .fd-col--offset-6[dir=rtl],
 [dir=rtl] .fd-col--offset-6 {
-  margin-left: 0;
-  margin-right: 50%
+  margin-right: 50%;
+  margin-left: 0
 }
 .fd-col--offset-after-6 {
   margin-right: 50%
@@ -11817,8 +11816,8 @@ fd-carousel:focus {
 }
 .fd-col--offset-7[dir=rtl],
 [dir=rtl] .fd-col--offset-7 {
-  margin-left: 0;
-  margin-right: 58.3333333333%
+  margin-right: 58.3333333333%;
+  margin-left: 0
 }
 .fd-col--offset-after-7 {
   margin-right: 58.3333333333%
@@ -11837,8 +11836,8 @@ fd-carousel:focus {
 }
 .fd-col--offset-8[dir=rtl],
 [dir=rtl] .fd-col--offset-8 {
-  margin-left: 0;
-  margin-right: 66.6666666667%
+  margin-right: 66.6666666667%;
+  margin-left: 0
 }
 .fd-col--offset-after-8 {
   margin-right: 66.6666666667%
@@ -11857,8 +11856,8 @@ fd-carousel:focus {
 }
 .fd-col--offset-9[dir=rtl],
 [dir=rtl] .fd-col--offset-9 {
-  margin-left: 0;
-  margin-right: 75%
+  margin-right: 75%;
+  margin-left: 0
 }
 .fd-col--offset-after-9 {
   margin-right: 75%
@@ -11877,8 +11876,8 @@ fd-carousel:focus {
 }
 .fd-col--offset-10[dir=rtl],
 [dir=rtl] .fd-col--offset-10 {
-  margin-left: 0;
-  margin-right: 83.3333333333%
+  margin-right: 83.3333333333%;
+  margin-left: 0
 }
 .fd-col--offset-after-10 {
   margin-right: 83.3333333333%
@@ -11897,8 +11896,8 @@ fd-carousel:focus {
 }
 .fd-col--offset-11[dir=rtl],
 [dir=rtl] .fd-col--offset-11 {
-  margin-left: 0;
-  margin-right: 91.6666666667%
+  margin-right: 91.6666666667%;
+  margin-left: 0
 }
 .fd-col--offset-after-11 {
   margin-right: 91.6666666667%
@@ -11917,8 +11916,8 @@ fd-carousel:focus {
 }
 .fd-col--offset-12[dir=rtl],
 [dir=rtl] .fd-col--offset-12 {
-  margin-left: 0;
-  margin-right: 100%
+  margin-right: 100%;
+  margin-left: 0
 }
 .fd-col--offset-after-12 {
   margin-right: 100%
@@ -11944,15 +11943,13 @@ fd-carousel:focus {
     padding: 0 .5rem
   }
   .fd-row {
-    min-width: calc(100% + .5rem * 2);
     margin-left: -.5rem;
-    margin-right: -.5rem
-  }
-  .fd-row:first-child {
-    margin-top: -1rem
+    margin-right: -.5rem;
+    min-width: calc(100% + .5rem * 2)
   }
   .fd-row .fd-col {
-    padding-top: 1rem
+    padding-top: .5rem;
+    padding-bottom: .5rem
   }
   .fd-col {
     padding: 0 .5rem
@@ -11966,8 +11963,8 @@ fd-carousel:focus {
   }
   .fd-col-md--offset-0[dir=rtl],
   [dir=rtl] .fd-col-md--offset-0 {
-    margin-left: 0;
-    margin-right: 0
+    margin-right: 0;
+    margin-left: 0
   }
   .fd-col-md--offset-after-0 {
     margin-right: 0
@@ -11986,8 +11983,8 @@ fd-carousel:focus {
   }
   .fd-col-md--offset-1[dir=rtl],
   [dir=rtl] .fd-col-md--offset-1 {
-    margin-left: 0;
-    margin-right: 8.3333333333%
+    margin-right: 8.3333333333%;
+    margin-left: 0
   }
   .fd-col-md--offset-after-1 {
     margin-right: 8.3333333333%
@@ -12006,8 +12003,8 @@ fd-carousel:focus {
   }
   .fd-col-md--offset-2[dir=rtl],
   [dir=rtl] .fd-col-md--offset-2 {
-    margin-left: 0;
-    margin-right: 16.6666666667%
+    margin-right: 16.6666666667%;
+    margin-left: 0
   }
   .fd-col-md--offset-after-2 {
     margin-right: 16.6666666667%
@@ -12026,8 +12023,8 @@ fd-carousel:focus {
   }
   .fd-col-md--offset-3[dir=rtl],
   [dir=rtl] .fd-col-md--offset-3 {
-    margin-left: 0;
-    margin-right: 25%
+    margin-right: 25%;
+    margin-left: 0
   }
   .fd-col-md--offset-after-3 {
     margin-right: 25%
@@ -12046,8 +12043,8 @@ fd-carousel:focus {
   }
   .fd-col-md--offset-4[dir=rtl],
   [dir=rtl] .fd-col-md--offset-4 {
-    margin-left: 0;
-    margin-right: 33.3333333333%
+    margin-right: 33.3333333333%;
+    margin-left: 0
   }
   .fd-col-md--offset-after-4 {
     margin-right: 33.3333333333%
@@ -12066,8 +12063,8 @@ fd-carousel:focus {
   }
   .fd-col-md--offset-5[dir=rtl],
   [dir=rtl] .fd-col-md--offset-5 {
-    margin-left: 0;
-    margin-right: 41.6666666667%
+    margin-right: 41.6666666667%;
+    margin-left: 0
   }
   .fd-col-md--offset-after-5 {
     margin-right: 41.6666666667%
@@ -12086,8 +12083,8 @@ fd-carousel:focus {
   }
   .fd-col-md--offset-6[dir=rtl],
   [dir=rtl] .fd-col-md--offset-6 {
-    margin-left: 0;
-    margin-right: 50%
+    margin-right: 50%;
+    margin-left: 0
   }
   .fd-col-md--offset-after-6 {
     margin-right: 50%
@@ -12106,8 +12103,8 @@ fd-carousel:focus {
   }
   .fd-col-md--offset-7[dir=rtl],
   [dir=rtl] .fd-col-md--offset-7 {
-    margin-left: 0;
-    margin-right: 58.3333333333%
+    margin-right: 58.3333333333%;
+    margin-left: 0
   }
   .fd-col-md--offset-after-7 {
     margin-right: 58.3333333333%
@@ -12126,8 +12123,8 @@ fd-carousel:focus {
   }
   .fd-col-md--offset-8[dir=rtl],
   [dir=rtl] .fd-col-md--offset-8 {
-    margin-left: 0;
-    margin-right: 66.6666666667%
+    margin-right: 66.6666666667%;
+    margin-left: 0
   }
   .fd-col-md--offset-after-8 {
     margin-right: 66.6666666667%
@@ -12146,8 +12143,8 @@ fd-carousel:focus {
   }
   .fd-col-md--offset-9[dir=rtl],
   [dir=rtl] .fd-col-md--offset-9 {
-    margin-left: 0;
-    margin-right: 75%
+    margin-right: 75%;
+    margin-left: 0
   }
   .fd-col-md--offset-after-9 {
     margin-right: 75%
@@ -12166,8 +12163,8 @@ fd-carousel:focus {
   }
   .fd-col-md--offset-10[dir=rtl],
   [dir=rtl] .fd-col-md--offset-10 {
-    margin-left: 0;
-    margin-right: 83.3333333333%
+    margin-right: 83.3333333333%;
+    margin-left: 0
   }
   .fd-col-md--offset-after-10 {
     margin-right: 83.3333333333%
@@ -12186,8 +12183,8 @@ fd-carousel:focus {
   }
   .fd-col-md--offset-11[dir=rtl],
   [dir=rtl] .fd-col-md--offset-11 {
-    margin-left: 0;
-    margin-right: 91.6666666667%
+    margin-right: 91.6666666667%;
+    margin-left: 0
   }
   .fd-col-md--offset-after-11 {
     margin-right: 91.6666666667%
@@ -12206,8 +12203,8 @@ fd-carousel:focus {
   }
   .fd-col-md--offset-12[dir=rtl],
   [dir=rtl] .fd-col-md--offset-12 {
-    margin-left: 0;
-    margin-right: 100%
+    margin-right: 100%;
+    margin-left: 0
   }
   .fd-col-md--offset-after-12 {
     margin-right: 100%
@@ -12228,8 +12225,8 @@ fd-carousel:focus {
   }
   .fd-col-lg--offset-0[dir=rtl],
   [dir=rtl] .fd-col-lg--offset-0 {
-    margin-left: 0;
-    margin-right: 0
+    margin-right: 0;
+    margin-left: 0
   }
   .fd-col-lg--offset-after-0 {
     margin-right: 0
@@ -12248,8 +12245,8 @@ fd-carousel:focus {
   }
   .fd-col-lg--offset-1[dir=rtl],
   [dir=rtl] .fd-col-lg--offset-1 {
-    margin-left: 0;
-    margin-right: 8.3333333333%
+    margin-right: 8.3333333333%;
+    margin-left: 0
   }
   .fd-col-lg--offset-after-1 {
     margin-right: 8.3333333333%
@@ -12268,8 +12265,8 @@ fd-carousel:focus {
   }
   .fd-col-lg--offset-2[dir=rtl],
   [dir=rtl] .fd-col-lg--offset-2 {
-    margin-left: 0;
-    margin-right: 16.6666666667%
+    margin-right: 16.6666666667%;
+    margin-left: 0
   }
   .fd-col-lg--offset-after-2 {
     margin-right: 16.6666666667%
@@ -12288,8 +12285,8 @@ fd-carousel:focus {
   }
   .fd-col-lg--offset-3[dir=rtl],
   [dir=rtl] .fd-col-lg--offset-3 {
-    margin-left: 0;
-    margin-right: 25%
+    margin-right: 25%;
+    margin-left: 0
   }
   .fd-col-lg--offset-after-3 {
     margin-right: 25%
@@ -12308,8 +12305,8 @@ fd-carousel:focus {
   }
   .fd-col-lg--offset-4[dir=rtl],
   [dir=rtl] .fd-col-lg--offset-4 {
-    margin-left: 0;
-    margin-right: 33.3333333333%
+    margin-right: 33.3333333333%;
+    margin-left: 0
   }
   .fd-col-lg--offset-after-4 {
     margin-right: 33.3333333333%
@@ -12328,8 +12325,8 @@ fd-carousel:focus {
   }
   .fd-col-lg--offset-5[dir=rtl],
   [dir=rtl] .fd-col-lg--offset-5 {
-    margin-left: 0;
-    margin-right: 41.6666666667%
+    margin-right: 41.6666666667%;
+    margin-left: 0
   }
   .fd-col-lg--offset-after-5 {
     margin-right: 41.6666666667%
@@ -12348,8 +12345,8 @@ fd-carousel:focus {
   }
   .fd-col-lg--offset-6[dir=rtl],
   [dir=rtl] .fd-col-lg--offset-6 {
-    margin-left: 0;
-    margin-right: 50%
+    margin-right: 50%;
+    margin-left: 0
   }
   .fd-col-lg--offset-after-6 {
     margin-right: 50%
@@ -12368,8 +12365,8 @@ fd-carousel:focus {
   }
   .fd-col-lg--offset-7[dir=rtl],
   [dir=rtl] .fd-col-lg--offset-7 {
-    margin-left: 0;
-    margin-right: 58.3333333333%
+    margin-right: 58.3333333333%;
+    margin-left: 0
   }
   .fd-col-lg--offset-after-7 {
     margin-right: 58.3333333333%
@@ -12388,8 +12385,8 @@ fd-carousel:focus {
   }
   .fd-col-lg--offset-8[dir=rtl],
   [dir=rtl] .fd-col-lg--offset-8 {
-    margin-left: 0;
-    margin-right: 66.6666666667%
+    margin-right: 66.6666666667%;
+    margin-left: 0
   }
   .fd-col-lg--offset-after-8 {
     margin-right: 66.6666666667%
@@ -12408,8 +12405,8 @@ fd-carousel:focus {
   }
   .fd-col-lg--offset-9[dir=rtl],
   [dir=rtl] .fd-col-lg--offset-9 {
-    margin-left: 0;
-    margin-right: 75%
+    margin-right: 75%;
+    margin-left: 0
   }
   .fd-col-lg--offset-after-9 {
     margin-right: 75%
@@ -12428,8 +12425,8 @@ fd-carousel:focus {
   }
   .fd-col-lg--offset-10[dir=rtl],
   [dir=rtl] .fd-col-lg--offset-10 {
-    margin-left: 0;
-    margin-right: 83.3333333333%
+    margin-right: 83.3333333333%;
+    margin-left: 0
   }
   .fd-col-lg--offset-after-10 {
     margin-right: 83.3333333333%
@@ -12448,8 +12445,8 @@ fd-carousel:focus {
   }
   .fd-col-lg--offset-11[dir=rtl],
   [dir=rtl] .fd-col-lg--offset-11 {
-    margin-left: 0;
-    margin-right: 91.6666666667%
+    margin-right: 91.6666666667%;
+    margin-left: 0
   }
   .fd-col-lg--offset-after-11 {
     margin-right: 91.6666666667%
@@ -12468,8 +12465,8 @@ fd-carousel:focus {
   }
   .fd-col-lg--offset-12[dir=rtl],
   [dir=rtl] .fd-col-lg--offset-12 {
-    margin-left: 0;
-    margin-right: 100%
+    margin-right: 100%;
+    margin-left: 0
   }
   .fd-col-lg--offset-after-12 {
     margin-right: 100%
@@ -12490,8 +12487,8 @@ fd-carousel:focus {
   }
   .fd-col-xl--offset-0[dir=rtl],
   [dir=rtl] .fd-col-xl--offset-0 {
-    margin-left: 0;
-    margin-right: 0
+    margin-right: 0;
+    margin-left: 0
   }
   .fd-col-xl--offset-after-0 {
     margin-right: 0
@@ -12510,8 +12507,8 @@ fd-carousel:focus {
   }
   .fd-col-xl--offset-1[dir=rtl],
   [dir=rtl] .fd-col-xl--offset-1 {
-    margin-left: 0;
-    margin-right: 8.3333333333%
+    margin-right: 8.3333333333%;
+    margin-left: 0
   }
   .fd-col-xl--offset-after-1 {
     margin-right: 8.3333333333%
@@ -12530,8 +12527,8 @@ fd-carousel:focus {
   }
   .fd-col-xl--offset-2[dir=rtl],
   [dir=rtl] .fd-col-xl--offset-2 {
-    margin-left: 0;
-    margin-right: 16.6666666667%
+    margin-right: 16.6666666667%;
+    margin-left: 0
   }
   .fd-col-xl--offset-after-2 {
     margin-right: 16.6666666667%
@@ -12550,8 +12547,8 @@ fd-carousel:focus {
   }
   .fd-col-xl--offset-3[dir=rtl],
   [dir=rtl] .fd-col-xl--offset-3 {
-    margin-left: 0;
-    margin-right: 25%
+    margin-right: 25%;
+    margin-left: 0
   }
   .fd-col-xl--offset-after-3 {
     margin-right: 25%
@@ -12570,8 +12567,8 @@ fd-carousel:focus {
   }
   .fd-col-xl--offset-4[dir=rtl],
   [dir=rtl] .fd-col-xl--offset-4 {
-    margin-left: 0;
-    margin-right: 33.3333333333%
+    margin-right: 33.3333333333%;
+    margin-left: 0
   }
   .fd-col-xl--offset-after-4 {
     margin-right: 33.3333333333%
@@ -12590,8 +12587,8 @@ fd-carousel:focus {
   }
   .fd-col-xl--offset-5[dir=rtl],
   [dir=rtl] .fd-col-xl--offset-5 {
-    margin-left: 0;
-    margin-right: 41.6666666667%
+    margin-right: 41.6666666667%;
+    margin-left: 0
   }
   .fd-col-xl--offset-after-5 {
     margin-right: 41.6666666667%
@@ -12610,8 +12607,8 @@ fd-carousel:focus {
   }
   .fd-col-xl--offset-6[dir=rtl],
   [dir=rtl] .fd-col-xl--offset-6 {
-    margin-left: 0;
-    margin-right: 50%
+    margin-right: 50%;
+    margin-left: 0
   }
   .fd-col-xl--offset-after-6 {
     margin-right: 50%
@@ -12630,8 +12627,8 @@ fd-carousel:focus {
   }
   .fd-col-xl--offset-7[dir=rtl],
   [dir=rtl] .fd-col-xl--offset-7 {
-    margin-left: 0;
-    margin-right: 58.3333333333%
+    margin-right: 58.3333333333%;
+    margin-left: 0
   }
   .fd-col-xl--offset-after-7 {
     margin-right: 58.3333333333%
@@ -12650,8 +12647,8 @@ fd-carousel:focus {
   }
   .fd-col-xl--offset-8[dir=rtl],
   [dir=rtl] .fd-col-xl--offset-8 {
-    margin-left: 0;
-    margin-right: 66.6666666667%
+    margin-right: 66.6666666667%;
+    margin-left: 0
   }
   .fd-col-xl--offset-after-8 {
     margin-right: 66.6666666667%
@@ -12670,8 +12667,8 @@ fd-carousel:focus {
   }
   .fd-col-xl--offset-9[dir=rtl],
   [dir=rtl] .fd-col-xl--offset-9 {
-    margin-left: 0;
-    margin-right: 75%
+    margin-right: 75%;
+    margin-left: 0
   }
   .fd-col-xl--offset-after-9 {
     margin-right: 75%
@@ -12690,8 +12687,8 @@ fd-carousel:focus {
   }
   .fd-col-xl--offset-10[dir=rtl],
   [dir=rtl] .fd-col-xl--offset-10 {
-    margin-left: 0;
-    margin-right: 83.3333333333%
+    margin-right: 83.3333333333%;
+    margin-left: 0
   }
   .fd-col-xl--offset-after-10 {
     margin-right: 83.3333333333%
@@ -12710,8 +12707,8 @@ fd-carousel:focus {
   }
   .fd-col-xl--offset-11[dir=rtl],
   [dir=rtl] .fd-col-xl--offset-11 {
-    margin-left: 0;
-    margin-right: 91.6666666667%
+    margin-right: 91.6666666667%;
+    margin-left: 0
   }
   .fd-col-xl--offset-after-11 {
     margin-right: 91.6666666667%
@@ -12730,8 +12727,8 @@ fd-carousel:focus {
   }
   .fd-col-xl--offset-12[dir=rtl],
   [dir=rtl] .fd-col-xl--offset-12 {
-    margin-left: 0;
-    margin-right: 100%
+    margin-right: 100%;
+    margin-left: 0
   }
   .fd-col-xl--offset-after-12 {
     margin-right: 100%
@@ -17226,13 +17223,16 @@ fd-carousel:focus {
 }
 .fd-container.fd-container--no-gap .fd-row .fd-col,
 .fd-container.fd-container--no-vertical-gap .fd-row .fd-col {
-  padding-top: 0
+  padding-top: 0;
+  padding-bottom: 0
 }
 .fd-container[dir=rtl],
 [dir=rtl] .fd-container {
   direction: rtl
 }
 .fd-row {
+  margin-left: -.25rem;
+  margin-right: -.25rem;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -17242,15 +17242,11 @@ fd-carousel:focus {
   -ms-flex: 0 0 100%;
   flex: 0 0 100%;
   position: relative;
-  margin-left: -.25rem;
-  margin-right: -.25rem;
   min-width: calc(100% + .25rem * 2)
 }
-.fd-row:first-child {
-  margin-top: -.5rem
-}
 .fd-row .fd-col {
-  padding-top: .5rem
+  padding-top: .25rem;
+  padding-bottom: .25rem
 }
 .fd-col {
   padding: 0 .25rem;
@@ -17266,8 +17262,8 @@ fd-carousel:focus {
 }
 .fd-col--offset-0[dir=rtl],
 [dir=rtl] .fd-col--offset-0 {
-  margin-left: 0;
-  margin-right: 0
+  margin-right: 0;
+  margin-left: 0
 }
 .fd-col--offset-after-0 {
   margin-right: 0
@@ -17286,8 +17282,8 @@ fd-carousel:focus {
 }
 .fd-col--offset-1[dir=rtl],
 [dir=rtl] .fd-col--offset-1 {
-  margin-left: 0;
-  margin-right: 8.3333333333%
+  margin-right: 8.3333333333%;
+  margin-left: 0
 }
 .fd-col--offset-after-1 {
   margin-right: 8.3333333333%
@@ -17306,8 +17302,8 @@ fd-carousel:focus {
 }
 .fd-col--offset-2[dir=rtl],
 [dir=rtl] .fd-col--offset-2 {
-  margin-left: 0;
-  margin-right: 16.6666666667%
+  margin-right: 16.6666666667%;
+  margin-left: 0
 }
 .fd-col--offset-after-2 {
   margin-right: 16.6666666667%
@@ -17326,8 +17322,8 @@ fd-carousel:focus {
 }
 .fd-col--offset-3[dir=rtl],
 [dir=rtl] .fd-col--offset-3 {
-  margin-left: 0;
-  margin-right: 25%
+  margin-right: 25%;
+  margin-left: 0
 }
 .fd-col--offset-after-3 {
   margin-right: 25%
@@ -17346,8 +17342,8 @@ fd-carousel:focus {
 }
 .fd-col--offset-4[dir=rtl],
 [dir=rtl] .fd-col--offset-4 {
-  margin-left: 0;
-  margin-right: 33.3333333333%
+  margin-right: 33.3333333333%;
+  margin-left: 0
 }
 .fd-col--offset-after-4 {
   margin-right: 33.3333333333%
@@ -17366,8 +17362,8 @@ fd-carousel:focus {
 }
 .fd-col--offset-5[dir=rtl],
 [dir=rtl] .fd-col--offset-5 {
-  margin-left: 0;
-  margin-right: 41.6666666667%
+  margin-right: 41.6666666667%;
+  margin-left: 0
 }
 .fd-col--offset-after-5 {
   margin-right: 41.6666666667%
@@ -17386,8 +17382,8 @@ fd-carousel:focus {
 }
 .fd-col--offset-6[dir=rtl],
 [dir=rtl] .fd-col--offset-6 {
-  margin-left: 0;
-  margin-right: 50%
+  margin-right: 50%;
+  margin-left: 0
 }
 .fd-col--offset-after-6 {
   margin-right: 50%
@@ -17406,8 +17402,8 @@ fd-carousel:focus {
 }
 .fd-col--offset-7[dir=rtl],
 [dir=rtl] .fd-col--offset-7 {
-  margin-left: 0;
-  margin-right: 58.3333333333%
+  margin-right: 58.3333333333%;
+  margin-left: 0
 }
 .fd-col--offset-after-7 {
   margin-right: 58.3333333333%
@@ -17426,8 +17422,8 @@ fd-carousel:focus {
 }
 .fd-col--offset-8[dir=rtl],
 [dir=rtl] .fd-col--offset-8 {
-  margin-left: 0;
-  margin-right: 66.6666666667%
+  margin-right: 66.6666666667%;
+  margin-left: 0
 }
 .fd-col--offset-after-8 {
   margin-right: 66.6666666667%
@@ -17446,8 +17442,8 @@ fd-carousel:focus {
 }
 .fd-col--offset-9[dir=rtl],
 [dir=rtl] .fd-col--offset-9 {
-  margin-left: 0;
-  margin-right: 75%
+  margin-right: 75%;
+  margin-left: 0
 }
 .fd-col--offset-after-9 {
   margin-right: 75%
@@ -17466,8 +17462,8 @@ fd-carousel:focus {
 }
 .fd-col--offset-10[dir=rtl],
 [dir=rtl] .fd-col--offset-10 {
-  margin-left: 0;
-  margin-right: 83.3333333333%
+  margin-right: 83.3333333333%;
+  margin-left: 0
 }
 .fd-col--offset-after-10 {
   margin-right: 83.3333333333%
@@ -17486,8 +17482,8 @@ fd-carousel:focus {
 }
 .fd-col--offset-11[dir=rtl],
 [dir=rtl] .fd-col--offset-11 {
-  margin-left: 0;
-  margin-right: 91.6666666667%
+  margin-right: 91.6666666667%;
+  margin-left: 0
 }
 .fd-col--offset-after-11 {
   margin-right: 91.6666666667%
@@ -17506,8 +17502,8 @@ fd-carousel:focus {
 }
 .fd-col--offset-12[dir=rtl],
 [dir=rtl] .fd-col--offset-12 {
-  margin-left: 0;
-  margin-right: 100%
+  margin-right: 100%;
+  margin-left: 0
 }
 .fd-col--offset-after-12 {
   margin-right: 100%
@@ -17533,15 +17529,13 @@ fd-carousel:focus {
     padding: 0 .5rem
   }
   .fd-row {
-    min-width: calc(100% + .5rem * 2);
     margin-left: -.5rem;
-    margin-right: -.5rem
-  }
-  .fd-row:first-child {
-    margin-top: -1rem
+    margin-right: -.5rem;
+    min-width: calc(100% + .5rem * 2)
   }
   .fd-row .fd-col {
-    padding-top: 1rem
+    padding-top: .5rem;
+    padding-bottom: .5rem
   }
   .fd-col {
     padding: 0 .5rem
@@ -17555,8 +17549,8 @@ fd-carousel:focus {
   }
   .fd-col-md--offset-0[dir=rtl],
   [dir=rtl] .fd-col-md--offset-0 {
-    margin-left: 0;
-    margin-right: 0
+    margin-right: 0;
+    margin-left: 0
   }
   .fd-col-md--offset-after-0 {
     margin-right: 0
@@ -17575,8 +17569,8 @@ fd-carousel:focus {
   }
   .fd-col-md--offset-1[dir=rtl],
   [dir=rtl] .fd-col-md--offset-1 {
-    margin-left: 0;
-    margin-right: 8.3333333333%
+    margin-right: 8.3333333333%;
+    margin-left: 0
   }
   .fd-col-md--offset-after-1 {
     margin-right: 8.3333333333%
@@ -17595,8 +17589,8 @@ fd-carousel:focus {
   }
   .fd-col-md--offset-2[dir=rtl],
   [dir=rtl] .fd-col-md--offset-2 {
-    margin-left: 0;
-    margin-right: 16.6666666667%
+    margin-right: 16.6666666667%;
+    margin-left: 0
   }
   .fd-col-md--offset-after-2 {
     margin-right: 16.6666666667%
@@ -17615,8 +17609,8 @@ fd-carousel:focus {
   }
   .fd-col-md--offset-3[dir=rtl],
   [dir=rtl] .fd-col-md--offset-3 {
-    margin-left: 0;
-    margin-right: 25%
+    margin-right: 25%;
+    margin-left: 0
   }
   .fd-col-md--offset-after-3 {
     margin-right: 25%
@@ -17635,8 +17629,8 @@ fd-carousel:focus {
   }
   .fd-col-md--offset-4[dir=rtl],
   [dir=rtl] .fd-col-md--offset-4 {
-    margin-left: 0;
-    margin-right: 33.3333333333%
+    margin-right: 33.3333333333%;
+    margin-left: 0
   }
   .fd-col-md--offset-after-4 {
     margin-right: 33.3333333333%
@@ -17655,8 +17649,8 @@ fd-carousel:focus {
   }
   .fd-col-md--offset-5[dir=rtl],
   [dir=rtl] .fd-col-md--offset-5 {
-    margin-left: 0;
-    margin-right: 41.6666666667%
+    margin-right: 41.6666666667%;
+    margin-left: 0
   }
   .fd-col-md--offset-after-5 {
     margin-right: 41.6666666667%
@@ -17675,8 +17669,8 @@ fd-carousel:focus {
   }
   .fd-col-md--offset-6[dir=rtl],
   [dir=rtl] .fd-col-md--offset-6 {
-    margin-left: 0;
-    margin-right: 50%
+    margin-right: 50%;
+    margin-left: 0
   }
   .fd-col-md--offset-after-6 {
     margin-right: 50%
@@ -17695,8 +17689,8 @@ fd-carousel:focus {
   }
   .fd-col-md--offset-7[dir=rtl],
   [dir=rtl] .fd-col-md--offset-7 {
-    margin-left: 0;
-    margin-right: 58.3333333333%
+    margin-right: 58.3333333333%;
+    margin-left: 0
   }
   .fd-col-md--offset-after-7 {
     margin-right: 58.3333333333%
@@ -17715,8 +17709,8 @@ fd-carousel:focus {
   }
   .fd-col-md--offset-8[dir=rtl],
   [dir=rtl] .fd-col-md--offset-8 {
-    margin-left: 0;
-    margin-right: 66.6666666667%
+    margin-right: 66.6666666667%;
+    margin-left: 0
   }
   .fd-col-md--offset-after-8 {
     margin-right: 66.6666666667%
@@ -17735,8 +17729,8 @@ fd-carousel:focus {
   }
   .fd-col-md--offset-9[dir=rtl],
   [dir=rtl] .fd-col-md--offset-9 {
-    margin-left: 0;
-    margin-right: 75%
+    margin-right: 75%;
+    margin-left: 0
   }
   .fd-col-md--offset-after-9 {
     margin-right: 75%
@@ -17755,8 +17749,8 @@ fd-carousel:focus {
   }
   .fd-col-md--offset-10[dir=rtl],
   [dir=rtl] .fd-col-md--offset-10 {
-    margin-left: 0;
-    margin-right: 83.3333333333%
+    margin-right: 83.3333333333%;
+    margin-left: 0
   }
   .fd-col-md--offset-after-10 {
     margin-right: 83.3333333333%
@@ -17775,8 +17769,8 @@ fd-carousel:focus {
   }
   .fd-col-md--offset-11[dir=rtl],
   [dir=rtl] .fd-col-md--offset-11 {
-    margin-left: 0;
-    margin-right: 91.6666666667%
+    margin-right: 91.6666666667%;
+    margin-left: 0
   }
   .fd-col-md--offset-after-11 {
     margin-right: 91.6666666667%
@@ -17795,8 +17789,8 @@ fd-carousel:focus {
   }
   .fd-col-md--offset-12[dir=rtl],
   [dir=rtl] .fd-col-md--offset-12 {
-    margin-left: 0;
-    margin-right: 100%
+    margin-right: 100%;
+    margin-left: 0
   }
   .fd-col-md--offset-after-12 {
     margin-right: 100%
@@ -17817,8 +17811,8 @@ fd-carousel:focus {
   }
   .fd-col-lg--offset-0[dir=rtl],
   [dir=rtl] .fd-col-lg--offset-0 {
-    margin-left: 0;
-    margin-right: 0
+    margin-right: 0;
+    margin-left: 0
   }
   .fd-col-lg--offset-after-0 {
     margin-right: 0
@@ -17837,8 +17831,8 @@ fd-carousel:focus {
   }
   .fd-col-lg--offset-1[dir=rtl],
   [dir=rtl] .fd-col-lg--offset-1 {
-    margin-left: 0;
-    margin-right: 8.3333333333%
+    margin-right: 8.3333333333%;
+    margin-left: 0
   }
   .fd-col-lg--offset-after-1 {
     margin-right: 8.3333333333%
@@ -17857,8 +17851,8 @@ fd-carousel:focus {
   }
   .fd-col-lg--offset-2[dir=rtl],
   [dir=rtl] .fd-col-lg--offset-2 {
-    margin-left: 0;
-    margin-right: 16.6666666667%
+    margin-right: 16.6666666667%;
+    margin-left: 0
   }
   .fd-col-lg--offset-after-2 {
     margin-right: 16.6666666667%
@@ -17877,8 +17871,8 @@ fd-carousel:focus {
   }
   .fd-col-lg--offset-3[dir=rtl],
   [dir=rtl] .fd-col-lg--offset-3 {
-    margin-left: 0;
-    margin-right: 25%
+    margin-right: 25%;
+    margin-left: 0
   }
   .fd-col-lg--offset-after-3 {
     margin-right: 25%
@@ -17897,8 +17891,8 @@ fd-carousel:focus {
   }
   .fd-col-lg--offset-4[dir=rtl],
   [dir=rtl] .fd-col-lg--offset-4 {
-    margin-left: 0;
-    margin-right: 33.3333333333%
+    margin-right: 33.3333333333%;
+    margin-left: 0
   }
   .fd-col-lg--offset-after-4 {
     margin-right: 33.3333333333%
@@ -17917,8 +17911,8 @@ fd-carousel:focus {
   }
   .fd-col-lg--offset-5[dir=rtl],
   [dir=rtl] .fd-col-lg--offset-5 {
-    margin-left: 0;
-    margin-right: 41.6666666667%
+    margin-right: 41.6666666667%;
+    margin-left: 0
   }
   .fd-col-lg--offset-after-5 {
     margin-right: 41.6666666667%
@@ -17937,8 +17931,8 @@ fd-carousel:focus {
   }
   .fd-col-lg--offset-6[dir=rtl],
   [dir=rtl] .fd-col-lg--offset-6 {
-    margin-left: 0;
-    margin-right: 50%
+    margin-right: 50%;
+    margin-left: 0
   }
   .fd-col-lg--offset-after-6 {
     margin-right: 50%
@@ -17957,8 +17951,8 @@ fd-carousel:focus {
   }
   .fd-col-lg--offset-7[dir=rtl],
   [dir=rtl] .fd-col-lg--offset-7 {
-    margin-left: 0;
-    margin-right: 58.3333333333%
+    margin-right: 58.3333333333%;
+    margin-left: 0
   }
   .fd-col-lg--offset-after-7 {
     margin-right: 58.3333333333%
@@ -17977,8 +17971,8 @@ fd-carousel:focus {
   }
   .fd-col-lg--offset-8[dir=rtl],
   [dir=rtl] .fd-col-lg--offset-8 {
-    margin-left: 0;
-    margin-right: 66.6666666667%
+    margin-right: 66.6666666667%;
+    margin-left: 0
   }
   .fd-col-lg--offset-after-8 {
     margin-right: 66.6666666667%
@@ -17997,8 +17991,8 @@ fd-carousel:focus {
   }
   .fd-col-lg--offset-9[dir=rtl],
   [dir=rtl] .fd-col-lg--offset-9 {
-    margin-left: 0;
-    margin-right: 75%
+    margin-right: 75%;
+    margin-left: 0
   }
   .fd-col-lg--offset-after-9 {
     margin-right: 75%
@@ -18017,8 +18011,8 @@ fd-carousel:focus {
   }
   .fd-col-lg--offset-10[dir=rtl],
   [dir=rtl] .fd-col-lg--offset-10 {
-    margin-left: 0;
-    margin-right: 83.3333333333%
+    margin-right: 83.3333333333%;
+    margin-left: 0
   }
   .fd-col-lg--offset-after-10 {
     margin-right: 83.3333333333%
@@ -18037,8 +18031,8 @@ fd-carousel:focus {
   }
   .fd-col-lg--offset-11[dir=rtl],
   [dir=rtl] .fd-col-lg--offset-11 {
-    margin-left: 0;
-    margin-right: 91.6666666667%
+    margin-right: 91.6666666667%;
+    margin-left: 0
   }
   .fd-col-lg--offset-after-11 {
     margin-right: 91.6666666667%
@@ -18057,8 +18051,8 @@ fd-carousel:focus {
   }
   .fd-col-lg--offset-12[dir=rtl],
   [dir=rtl] .fd-col-lg--offset-12 {
-    margin-left: 0;
-    margin-right: 100%
+    margin-right: 100%;
+    margin-left: 0
   }
   .fd-col-lg--offset-after-12 {
     margin-right: 100%
@@ -18079,8 +18073,8 @@ fd-carousel:focus {
   }
   .fd-col-xl--offset-0[dir=rtl],
   [dir=rtl] .fd-col-xl--offset-0 {
-    margin-left: 0;
-    margin-right: 0
+    margin-right: 0;
+    margin-left: 0
   }
   .fd-col-xl--offset-after-0 {
     margin-right: 0
@@ -18099,8 +18093,8 @@ fd-carousel:focus {
   }
   .fd-col-xl--offset-1[dir=rtl],
   [dir=rtl] .fd-col-xl--offset-1 {
-    margin-left: 0;
-    margin-right: 8.3333333333%
+    margin-right: 8.3333333333%;
+    margin-left: 0
   }
   .fd-col-xl--offset-after-1 {
     margin-right: 8.3333333333%
@@ -18119,8 +18113,8 @@ fd-carousel:focus {
   }
   .fd-col-xl--offset-2[dir=rtl],
   [dir=rtl] .fd-col-xl--offset-2 {
-    margin-left: 0;
-    margin-right: 16.6666666667%
+    margin-right: 16.6666666667%;
+    margin-left: 0
   }
   .fd-col-xl--offset-after-2 {
     margin-right: 16.6666666667%
@@ -18139,8 +18133,8 @@ fd-carousel:focus {
   }
   .fd-col-xl--offset-3[dir=rtl],
   [dir=rtl] .fd-col-xl--offset-3 {
-    margin-left: 0;
-    margin-right: 25%
+    margin-right: 25%;
+    margin-left: 0
   }
   .fd-col-xl--offset-after-3 {
     margin-right: 25%
@@ -18159,8 +18153,8 @@ fd-carousel:focus {
   }
   .fd-col-xl--offset-4[dir=rtl],
   [dir=rtl] .fd-col-xl--offset-4 {
-    margin-left: 0;
-    margin-right: 33.3333333333%
+    margin-right: 33.3333333333%;
+    margin-left: 0
   }
   .fd-col-xl--offset-after-4 {
     margin-right: 33.3333333333%
@@ -18179,8 +18173,8 @@ fd-carousel:focus {
   }
   .fd-col-xl--offset-5[dir=rtl],
   [dir=rtl] .fd-col-xl--offset-5 {
-    margin-left: 0;
-    margin-right: 41.6666666667%
+    margin-right: 41.6666666667%;
+    margin-left: 0
   }
   .fd-col-xl--offset-after-5 {
     margin-right: 41.6666666667%
@@ -18199,8 +18193,8 @@ fd-carousel:focus {
   }
   .fd-col-xl--offset-6[dir=rtl],
   [dir=rtl] .fd-col-xl--offset-6 {
-    margin-left: 0;
-    margin-right: 50%
+    margin-right: 50%;
+    margin-left: 0
   }
   .fd-col-xl--offset-after-6 {
     margin-right: 50%
@@ -18219,8 +18213,8 @@ fd-carousel:focus {
   }
   .fd-col-xl--offset-7[dir=rtl],
   [dir=rtl] .fd-col-xl--offset-7 {
-    margin-left: 0;
-    margin-right: 58.3333333333%
+    margin-right: 58.3333333333%;
+    margin-left: 0
   }
   .fd-col-xl--offset-after-7 {
     margin-right: 58.3333333333%
@@ -18239,8 +18233,8 @@ fd-carousel:focus {
   }
   .fd-col-xl--offset-8[dir=rtl],
   [dir=rtl] .fd-col-xl--offset-8 {
-    margin-left: 0;
-    margin-right: 66.6666666667%
+    margin-right: 66.6666666667%;
+    margin-left: 0
   }
   .fd-col-xl--offset-after-8 {
     margin-right: 66.6666666667%
@@ -18259,8 +18253,8 @@ fd-carousel:focus {
   }
   .fd-col-xl--offset-9[dir=rtl],
   [dir=rtl] .fd-col-xl--offset-9 {
-    margin-left: 0;
-    margin-right: 75%
+    margin-right: 75%;
+    margin-left: 0
   }
   .fd-col-xl--offset-after-9 {
     margin-right: 75%
@@ -18279,8 +18273,8 @@ fd-carousel:focus {
   }
   .fd-col-xl--offset-10[dir=rtl],
   [dir=rtl] .fd-col-xl--offset-10 {
-    margin-left: 0;
-    margin-right: 83.3333333333%
+    margin-right: 83.3333333333%;
+    margin-left: 0
   }
   .fd-col-xl--offset-after-10 {
     margin-right: 83.3333333333%
@@ -18299,8 +18293,8 @@ fd-carousel:focus {
   }
   .fd-col-xl--offset-11[dir=rtl],
   [dir=rtl] .fd-col-xl--offset-11 {
-    margin-left: 0;
-    margin-right: 91.6666666667%
+    margin-right: 91.6666666667%;
+    margin-left: 0
   }
   .fd-col-xl--offset-after-11 {
     margin-right: 91.6666666667%
@@ -18319,8 +18313,8 @@ fd-carousel:focus {
   }
   .fd-col-xl--offset-12[dir=rtl],
   [dir=rtl] .fd-col-xl--offset-12 {
-    margin-left: 0;
-    margin-right: 100%
+    margin-right: 100%;
+    margin-left: 0
   }
   .fd-col-xl--offset-after-12 {
     margin-right: 100%

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fundamental-styles/theming-preview",
-    "version": "0.23.0-rc.3",
+    "version": "0.23.0-rc.4",
     "license": "Apache-2.0",
     "homepage": "https://sap.github.io/fundamental-styles/",
     "description": "Fundamental Library Styles - Theming Package Preview",
@@ -9,7 +9,7 @@
       "url": "https://github.com/SAP/fundamental-styles"
     },
     "dependencies": {
-        "fundamental-styles": "0.23.0-rc.3"
+        "fundamental-styles": "0.23.0-rc.4"
     }
   }