Merged in fix/carousel-card-gap (pull request #1343)

refactor: Adjust default carousel card gap

Approved-by: Christian Andolf

components/Blocks/CarouselCards/carouselCards.module.css

@@ -1,35 +1,3 @@
-/*
-  Mock styles for the carousel cards. Will be removed/replaced
-  when the carousel functionality is implemented (SW-1542). 
-*/
-.cardsContainer {
-  display: grid;
-  gap: var(--Spacing-x3);
-  grid-auto-flow: column;
-  grid-auto-columns: 100%;
-  overflow-x: auto;
-  overscroll-behavior-x: contain;
-  scroll-snap-type: x mandatory;
-}
-
-.cardsContainer > * {
-  scroll-snap-align: start;
-}
-
-/* Show 2 cards on tablet */
-@media (min-width: 768px) {
-  .cardsContainer {
-    grid-auto-columns: calc((100% - var(--Spacing-x3)) / 2);
-  }
-}
-
-/* Show 3 cards on desktop */
-@media (min-width: 1024px) {
-  .cardsContainer {
-    grid-auto-columns: calc((100% - var(--Spacing-x3) * 2) / 3);
-  }
-}
-
 .navigationButton {
   top: 30%;
 }

components/Carousel/carousel.module.css

@@ -10,7 +10,7 @@
   display: grid;
   grid-auto-flow: column;
   grid-auto-columns: 100%;
-  gap: var(--Spacing-x3);
+  gap: var(--Spacing-x2);
 }
 
 .item {
@@ -34,11 +34,11 @@
 }
 
 .buttonPrev {
-  left: calc(-1 * var(--Spacing-x3));
+  left: calc(-1 * var(--Spacing-x1));
 }
 
 .buttonNext {
-  right: calc(-1 * var(--Spacing-x3));
+  right: calc(-1 * var(--Spacing-x1));
 }
 
 .prevIcon {