ISTWCMS-5650: Add css to display the FF in carousel as per numItems

src/patterns/04-components/facts-and-figures/_facts-and-figures.scss

@@ -447,9 +447,10 @@ $highlighted-fact-round: $global-rounded;
 from owl script.  Ensures bubbles
 are the same height. */
 .uw-ff {
-  &--with-bubbles{
-    .uw-ff--fact{
+  &--with-bubbles {
+    .uw-ff--fact {
       border-radius: $highlighted-fact-radius + 10;
+
       &:nth-of-type(odd) {
         &::after {
           border-left: var(--size-2) solid transparent;
@@ -479,7 +480,7 @@ are the same height. */
       }
     }
 
-    &__black{
+    &__black {
       .uw-ff--fact {
         background-color: var(--uw-black);
 
@@ -491,13 +492,14 @@ are the same height. */
 
         &:nth-of-type(even) {
           &::after {
-            border-top: var(--size-3) solid  var(--uw-black);
+            border-top: var(--size-3) solid var(--uw-black);
           }
         }
       }
     }
-    &__white{
-      .uw-ff--fact{
+
+    &__white {
+      .uw-ff--fact {
         background-color: var(--uw-white);
 
         &:nth-of-type(odd) {
@@ -513,8 +515,9 @@ are the same height. */
         }
       }
     }
-    &__grey{
-      .uw-ff--fact{
+
+    &__grey {
+      .uw-ff--fact {
         background-color: var(--uw-black-1);
 
         &:nth-of-type(odd) {
@@ -522,6 +525,7 @@ are the same height. */
             border-bottom: var(--size-3) solid var(--uw-black-1);
           }
         }
+
         &:nth-of-type(even) {
           &::after {
             border-top: var(--size-3) solid var(--uw-black-1);
@@ -530,8 +534,8 @@ are the same height. */
       }
     }
 
-    &__gold{
-      .uw-ff--fact{
+    &__gold {
+      .uw-ff--fact {
         background-color: var(--uw-gold);
 
         &:nth-of-type(odd) {
@@ -568,6 +572,7 @@ are the same height. */
       .infographic-half-circle {
         justify-self: flex-start;
       }
+
       .uw-ff--text {
         text-align: left;
       }
@@ -583,7 +588,7 @@ are the same height. */
         width: auto;
       }
 
-      .uw-ff--fact{
+      .uw-ff--fact {
         align-items: flex-end;
         text-align: right;
       }
@@ -610,7 +615,7 @@ are the same height. */
         text-align: center;
       }
 
-      .highlighted-fact-infographic{
+      .highlighted-fact-infographic {
         align-items: center;
       }
 
@@ -619,7 +624,7 @@ are the same height. */
         width: auto;
       }
 
-      .infographic-number{
+      .infographic-number {
         margin: 0 auto;
         text-align: center;
         width: auto;
@@ -658,8 +663,10 @@ are the same height. */
     margin: var(--size-1) 0;
     text-wrap: balance;
     width: 100%;
+
     &__icon {
       display: block;
+
       img {
         display: block;
         height: 100%;
@@ -711,6 +718,7 @@ are the same height. */
       i {
         font-style: normal;
       }
+
       strong,
       b {
         font-weight: bold;
@@ -718,14 +726,14 @@ are the same height. */
     }
   }
 
-  &--no-carousel{
+  &--no-carousel {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     gap: 10px;
 
-    .uw-ff{
-      &--fact{
+    .uw-ff {
+      &--fact {
         @include flex(1 1 auto);
         @include flex-grow(1);
         margin: var(--size-205) 0;
@@ -771,6 +779,7 @@ are the same height. */
             width: 100%;
           }
         }
+
         .uw-full-width & {
 
           @media(min-width: $screen-xs) {
@@ -789,69 +798,109 @@ are the same height. */
     }
   }
 
-  &--carousel{
-    .flickity-slider {
-      display: flex;
-    }
-
-    .uw-ff--fact {
+  &--carousel {
+    .carousel {
       display: flex;
-      @include flex(1 1 auto);
-      @include flex-grow(1);
       flex-flow: column;
-      position: relative;
-      padding: var(--size-4);
+      .flickity-slider {
+        display: flex;
+      }
+      .uw-ff--fact {
+        display: flex;
+        @include flex(1 1 auto);
+        @include flex-grow(1);
+        flex-flow: column;
+        position: relative;
+        margin-left: var(--size-110);
+        padding: var(--size-4);
+        min-height:100%;
 
-      &:nth-of-type(odd) {
-        .uw-ff--fact{
-          &::after{
-            bottom: inherit;
-            top: -1.25rem;
+        &:nth-of-type(odd) {
+          .uw-ff--fact {
+            &::after {
+              bottom: inherit;
+              top: -1.25rem;
+            }
           }
         }
-      }
 
-      &:nth-of-type(even) {
-        .uw-ff--fact{
-          &::after{
-            bottom: -1.25rem;
-            top: inherit;
-            transform: rotate(180deg);
+        &:nth-of-type(even) {
+          .uw-ff--fact {
+            &::after {
+              bottom: -1.25rem;
+              top: inherit;
+              transform: rotate(180deg);
+            }
+          }
+        }
+
+        &:first-child {
+          margin-left: 0;
+        }
+        [data-num-per-carousel='1'] & ,
+        [data-num-per-carousel='2'] & ,
+        [data-num-per-carousel='3'] & ,
+        [data-num-per-carousel='4'] & {
+          width: 100%;
+          @media(min-width: $screen-md) {
+            width: 49.5%;
+          }
+        }
+
+        [data-num-per-carousel='1'] & {
+          @media(min-width: $screen-md) {
+            width: 100%
+          }
+        }
+        [data-num-per-carousel='2'] & {
+          @media(min-width: $screen-lg) {
+            width: 49.5%
+          }
+        }
+        [data-num-per-carousel='3'] & {
+          @media(min-width: $screen-lg) {
+            width: 32.5%
+          }
+        }
+        [data-num-per-carousel='4'] & {
+          @media(min-width: $screen-lg) {
+            width: 24.25%
           }
         }
       }
 
-      &:first-child {
-        margin-left: 0;
+      .flickity-page-dots {
+        bottom: -3.125rem;
+
+        .dot {
+          height: var(--size-2);
+          width: var(--size-2);
+
+          &.is-selected {
+            background: var(--uw-black);
+          }
+
+          &:hover,
+          &:focus {
+            opacity: 1 !important;
+            background: var(--gray-5);
+          }
+        }
       }
-    }
 
-    .flickity-viewport {
-      display: flex;
-      flex-flow: column;
-      margin-bottom: var(--size-4);
-      overflow: inherit;
-      overflow-x: clip;
-      overflow-y: visible;
-      padding-top: var(--size-4);
-    }
-  }
-}
-.flickity-page-dots {
-  bottom: -3.125rem;
-  .dot {
-    height: var(--size-2);
-    width: var(--size-2);
-    &.is-selected {
-      background:var(--uw-black);
-    }
-    &:hover,
-    &:focus{
-      opacity: 1 !important;
-      background: var(--gray-5);
+      .flickity-viewport {
+        display: flex;
+        flex-flow: column;
+        margin-bottom: var(--size-4);
+        overflow: inherit;
+        overflow-x: clip;
+        overflow-y: visible;
+        padding-top: var(--size-4);
+      }
     }
   }
 }
+
 .uw-button--wrap {
   display: flex;
   width:100%;
@@ -1017,24 +1066,3 @@ are the same height. */
     }
   }
 }
-
-.uw-ff--carousel .carousel {
-  display: flex;
-  flex-flow: column;
-  .uw-ff {
-    &--fact {
-      @include flex(1);
-      @include flex-grow(1);
-      margin-left: var(--size-110);
-      width: 100%;
-      padding: var(--size-4);
-      min-height:100%;
-      @media(min-width: $screen-sm) {
-        max-width: 49%;
-      }
-      @media(min-width: $screen-xl) {
-        max-width: 32.5%;
-      }
-    }
-  }
-}

src/patterns/04-components/facts-and-figures/facts-and-figures.twig

 <div id="uw-ff-{{ ffs.id }}" class="uw-ff {% if ffs.show %}uw-ff--with-bubbles uw-ff--with-bubbles__{{ ffs.bg_colour}}{% else%}uw-ff__{{ ffs.bg_colour}}{% endif %}" data-carousel="{{ ffs.num_per_carousel ? 'yes' :'no' }}" data-num-per-carousel="{{ ffs.num_per_carousel }}" data-id="{{ ffs.id }}">
   <div class="uw-ff--wrapper uw-ff--wrapper__text-{{ ffs.text_align }} {{ ffs.num_per_carousel ? 'uw-ff--carousel' : 'uw-ff--no-carousel' }} {{ ffs.theme }}">
     {% if ffs.num_per_carousel >= 1%}
+
       {% embed '@layouts/carousel/carousel.twig' %}
         {% block content %}
           {% for details in ffs.details %}