diff --git a/files/nutshell/scss/base/_type.scss b/files/nutshell/scss/base/_type.scss
index 80f19cd..7d0cd04 100644
--- a/files/nutshell/scss/base/_type.scss
+++ b/files/nutshell/scss/base/_type.scss
@@ -90,7 +90,7 @@ $headlines: (
 html {
   --headings__font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif;
   --headings__font-weight: 700;
-  --headings__color:       currentColor;
+  --headings__color:       'currentColor'
 
   --paragraph__link-color:							var(--color-links);
   --code__color:            						var(--color-highlight);
diff --git a/files/nutshell/scss/components/_accordion.scss b/files/nutshell/scss/components/_accordion.scss
index a9b9ce3..0f57a75 100644
--- a/files/nutshell/scss/components/_accordion.scss
+++ b/files/nutshell/scss/components/_accordion.scss
@@ -53,5 +53,6 @@ html {
   .accordion {
     padding: var(--accordion-padding);
     background: var(--accordion-background);
+    overflow: hidden;
   }
 }
diff --git a/files/nutshell/scss/components/_slider.scss b/files/nutshell/scss/components/_slider.scss
index 7937991..30b1010 100644
--- a/files/nutshell/scss/components/_slider.scss
+++ b/files/nutshell/scss/components/_slider.scss
@@ -11,9 +11,14 @@
 // --------------------------------------------------
 
 // VARIABLES
+// [1] some fonts use different sizes for left and right arrow. 
+//     We take Arial to make sure it has the same size.
+
 html {
   --arrow-color:               inherit;
   --arrow-size:                2rem;
+  --arrow-font-family:         'Arial';
+  --menu-point-size:           2rem;
   --menu-point-color:          inherit;
   --menu-point-color--active:  var(--color-brand);
 }
@@ -28,15 +33,13 @@ html {
 
 // default slider
 // NOTES:
-// [1] overrides default contao slider styling
-// [2] some fonts use different sizes for left and right arrow. 
-//     We take Arial to make sure it has the same size.
+// [2] overrides default contao slider styling
 .slider {
   position: relative;
   
   .slider-control {
-  	position: static; // [1]
-  	height: 0; // [1]
+  	position: static; // [2]
+  	height: 0; // [2]
   }
   
   .slider-control a {
@@ -49,7 +52,7 @@ html {
     position: absolute;
     display: block;
     color: var(--arrow-color);
-    font-family: Arial; // [2]
+    font-family: var(--arrow-font-family);
     
     &:before {
       padding: var(--base-spacing-unit--sm);
@@ -70,18 +73,18 @@ html {
   }
   
   .slider-menu {
-    font-size: 3rem;
+    font-size: var(--menu-point-size);
     line-height: 1;
     
-    top: auto; // [1]
-    bottom: 0; // [1]
+    top: auto; // [2]
+    bottom: 0; // [2]
     
     b {
-      color: var(--menu-point-color); // [1]
+      color: var(--menu-point-color); // [2]
     }
     
     b.active {
-      color: var(--menu-point-color--active); // [1]
+      color: var(--menu-point-color--active); // [2]
     }
     
     b:hover {