add icons, fix news linking

packages/base/Resources/Public/Scss/abstracts/_icons.scss

@@ -34,7 +34,6 @@
   mask-image: url(../Icons/phone.svg);
 }
 
-
 a[href*="instagram.com"], a[href*="tiktok.com"], a[href*="linkedin.com"], a[href*="twitter.com"], a[href*="x.com"] {
   position: relative;
   top: 3px;
@@ -60,3 +59,20 @@ a[href*="linkedin.com"]::before {
 a[href*="x.com"]::before {
   mask-image: url(../Icons/x.svg);
 }
+
+/* Newly added icons */
+.ci-angle-right::before {
+  mask-image: url(../Icons/angle-right.svg);
+}
+
+.ci-angle-left::before {
+  mask-image: url(../Icons/angle-left.svg);
+}
+
+.ci-skip-forward::before {
+  mask-image: url(../Icons/skip-forward.svg);
+}
+
+.ci-skip-back::before {
+  mask-image: url(../Icons/skip-back.svg);
+}

packages/base/Resources/Public/Scss/components/_news.scss

@@ -9,12 +9,6 @@
       max-width: 100%;
   }
 
-  // @media (min-width: $breakpoint-md) {
-  //   .news-list-item {
-  //     grid-column: span 2;
-  //   }
-  // }
-
   @media (min-width: $breakpoint-lg) {
     .news-list-item {
       grid-column: span 2;
@@ -75,10 +69,6 @@
         }
       }
     }
-
-    .previous a, .next a, .first a, .last a {
-      // these are also styled as circles
-    }
   }
 }
 
@@ -128,3 +118,26 @@
     }
   }
 }
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+/* Show header button only on desktop */
+.header-btn {
+  display: none;
+  @media (min-width: $breakpoint-lg) {
+    display: inline-block;
+  }
+}
+
+/* Show mobile button only below desktop breakpoint */
+.mobile-btn {
+  display: block;
+  margin-top: 1rem;
+  @media (min-width: $breakpoint-lg) {
+    display: none;
+  }
+}