diff --git a/packages/base/Resources/Public/Icons/angle-left.svg b/packages/base/Resources/Public/Icons/angle-left.svg
new file mode 100644
index 0000000..4e24f33
--- /dev/null
+++ b/packages/base/Resources/Public/Icons/angle-left.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/base/Resources/Public/Icons/angle-right.svg b/packages/base/Resources/Public/Icons/angle-right.svg
new file mode 100644
index 0000000..b0b8cbb
--- /dev/null
+++ b/packages/base/Resources/Public/Icons/angle-right.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/base/Resources/Public/Icons/skip-back.svg b/packages/base/Resources/Public/Icons/skip-back.svg
new file mode 100644
index 0000000..30a1631
--- /dev/null
+++ b/packages/base/Resources/Public/Icons/skip-back.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/base/Resources/Public/Icons/skip-forward.svg b/packages/base/Resources/Public/Icons/skip-forward.svg
new file mode 100644
index 0000000..f2b4ac2
--- /dev/null
+++ b/packages/base/Resources/Public/Icons/skip-forward.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/base/Resources/Public/Scss/abstracts/_icons.scss b/packages/base/Resources/Public/Scss/abstracts/_icons.scss
index b5d12ce..540f3b1 100644
--- a/packages/base/Resources/Public/Scss/abstracts/_icons.scss
+++ b/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);
+}
diff --git a/packages/base/Resources/Public/Scss/components/_news.scss b/packages/base/Resources/Public/Scss/components/_news.scss
index fecccf1..f12a085 100644
--- a/packages/base/Resources/Public/Scss/components/_news.scss
+++ b/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;
+ }
+}