feat: button design, icons fix

packages/base/ContentBlocks/ContentElements/stats/assets/frontend.css

@@ -1,28 +1,29 @@
 .frame-type-cloonar_stats .stats-wrapper {
     display: flex;
     flex-wrap: wrap;
-    gap: 1rem;
-    justify-content: space-between;
+    justify-content: flex-start;
     align-items: flex-start;
     position: relative;
-    z-index: 10; /* Ensure it's on top of the hero container */
+    z-index: 10;
     background: #fff;
-    padding: 2rem 1rem;
+    padding: 1rem;
     max-width: 1140px;
     margin-left: auto;
     margin-right: auto;
+    gap: 1rem; /* maintain gap on mobile */
 }
 
-/* Each paragraph is treated as a column */
+/* Two columns on mobile */
 .frame-type-cloonar_stats .stats-wrapper p {
-    flex: 1 1 100%;
+    box-sizing: border-box;
+    flex: 0 0 calc((100% - 1rem) / 2);
+    max-width: calc((100% - 1rem) / 2);
     text-align: center;
     margin-bottom: 1rem;
     text-transform: uppercase;
     color: var(--bs-primary);
 }
 
-/* Lead paragraphs have larger text for numbers */
 .frame-type-cloonar_stats .stats-wrapper span.big-number {
     font-size: 4rem;
     font-family: 'Hajime Sans', sans-serif;
@@ -31,11 +32,13 @@
 
 @media (min-width: 768px) {
   .frame-type-cloonar_stats .stats-wrapper {
-      gap: 2rem;
       padding: 3rem 1rem;
-  }
-  .frame-type-cloonar_stats .stats-wrapper p {
-      flex: 1 1 calc(25% - 2rem);
+      gap: 2rem; /* increase gap on desktop */
   }
 
+  /* Four columns on desktop */
+  .frame-type-cloonar_stats .stats-wrapper p {
+      flex: 0 0 calc((100% - 6rem) / 4); /* 3 gaps * 2rem = 6rem total gap */
+      max-width: calc((100% - 6rem) / 4);
+  }
 }