diff --git a/public/sass/custom/blocks/_separator.scss b/public/sass/custom/blocks/_separator.scss
index 47144c6..37c1535 100644
--- a/public/sass/custom/blocks/_separator.scss
+++ b/public/sass/custom/blocks/_separator.scss
@@ -1,9 +1,11 @@
-.separator {
-  height: 1px;
-  width: 100%;
+@layer kth-style.old {
+  .separator {
+    height: 1px;
+    width: 100%;
 
-  &.gray {
-    background-color: $borderGrey;
-    margin-bottom: 1.875em;
+    &.gray {
+      background-color: $borderGrey;
+      margin-bottom: 1.875em;
+    }
   }
 }
diff --git a/public/sass/custom/blocks/mainMenu.scss b/public/sass/custom/blocks/mainMenu.scss
index 6c2b27e..675eccf 100644
--- a/public/sass/custom/blocks/mainMenu.scss
+++ b/public/sass/custom/blocks/mainMenu.scss
@@ -1,166 +1,167 @@
 // sass-lint:disable no-mergeable-selectors
+@layer kth-style.old {
+  #mainMenu {
+    display: none;
+    &.sticky-menu {
+      position: sticky;
+      align-self: start;
+      top: 0;
+    }
 
-#mainMenu {
-  display: none;
-  &.sticky-menu {
-    position: sticky;
-    align-self: start;
-    top: 0;
-  }
-
-  @media (min-width: 992px) {
-    display: block;
-    width: 296px;
-    max-width: 296px;
-    &.col {
-      &.navbar {
-        padding: 0 5px $gutter 2 * $gutter;
-
-        &.navbar-expand-lg {
-          &.navbar-light {
-            #navbarNav {
-              &.collapse {
-                &.navbar-collapse {
-                  display: block !important; //  Need !important to override bootstrap default.
-                  position: relative;
-                  top: 0;
-                  z-index: 0;
-
-                  ul {
-                    &.nav {
-                      background-color: $white;
-                      box-shadow: none;
-                      position: relative;
-                      width: 250px;
-                      z-index: 1;
-                      width: auto;
-
-                      .nav-item {
-                        &.ancestor {
-                          display: block;
-                          padding: 8px $gutter 8px 0;
-                          font-weight: 600;
-                          line-height: 1.375;
-                          margin-top: 0;
-                          margin-bottom: 0;
-                          @media (min-width: 768px) {
-                            font-size: 1.25rem;
+    @media (min-width: 992px) {
+      display: block;
+      width: 296px;
+      max-width: 296px;
+      &.col {
+        &.navbar {
+          padding: 0 5px $gutter 2 * $gutter;
+
+          &.navbar-expand-lg {
+            &.navbar-light {
+              #navbarNav {
+                &.collapse {
+                  &.navbar-collapse {
+                    display: block !important; //  Need !important to override bootstrap default.
+                    position: relative;
+                    top: 0;
+                    z-index: 0;
+
+                    ul {
+                      &.nav {
+                        background-color: $white;
+                        box-shadow: none;
+                        position: relative;
+                        width: 250px;
+                        z-index: 1;
+                        width: auto;
+
+                        .nav-item {
+                          &.ancestor {
+                            display: block;
+                            padding: 8px $gutter 8px 0;
+                            font-weight: 600;
+                            line-height: 1.375;
+                            margin-top: 0;
+                            margin-bottom: 0;
+                            @media (min-width: 768px) {
+                              font-size: 1.25rem;
+                            }
                           }
-                        }
 
-                        &.leaf {
-                          width: 250px;
-                        }
+                          &.leaf {
+                            width: 250px;
+                          }
 
-                        &.selected {
-                          width: 250px;
+                          &.selected {
+                            width: 250px;
+                          }
                         }
-                      }
 
-                      li {
-                        font-size: 1rem;
-                        font-weight: 400;
-                        line-height: 1.5;
-                        margin-top: 0;
-                        margin-bottom: 0;
+                        li {
+                          font-size: 1rem;
+                          font-weight: 400;
+                          line-height: 1.5;
+                          margin-top: 0;
+                          margin-bottom: 0;
 
-                        &.nav-item {
-                          &.ancestor {
-                            a {
-                              &.nav-link {
-                                padding: 7px $gutter 7px 0;
+                          &.nav-item {
+                            &.ancestor {
+                              a {
+                                &.nav-link {
+                                  padding: 7px $gutter 7px 0;
+                                }
                               }
                             }
-                          }
 
-                          &.leaf {
-                            a {
-                              &.nav-link {
-                                padding: 7px $gutter 7px 0;
+                            &.leaf {
+                              a {
+                                &.nav-link {
+                                  padding: 7px $gutter 7px 0;
 
-                                &[href]:hover {
-                                  text-decoration: underline;
+                                  &[href]:hover {
+                                    text-decoration: underline;
+                                  }
                                 }
                               }
                             }
-                          }
 
-                          &.selected {
-                            a,
-                            span {
-                              &.nav-link {
-                                padding: 7px $gutter 7px 0;
-                                color: $black;
+                            &.selected {
+                              a,
+                              span {
+                                &.nav-link {
+                                  padding: 7px $gutter 7px 0;
+                                  color: $black;
+                                }
                               }
                             }
-                          }
 
-                          &.node {
-                            a {
-                              &.nav-link {
-                                color: $black;
-                                padding: 7px $gutter 7px 0;
+                            &.node {
+                              a {
+                                &.nav-link {
+                                  color: $black;
+                                  padding: 7px $gutter 7px 0;
 
-                                &[href]:hover {
-                                  text-decoration: underline;
+                                  &[href]:hover {
+                                    text-decoration: underline;
+                                  }
                                 }
                               }
                             }
                           }
-                        }
 
-                        span {
-                          &.nav-item {
-                            &.ancestor {
-                              display: block;
+                          span {
+                            &.nav-item {
+                              &.ancestor {
+                                display: block;
+                              }
                             }
                           }
-                        }
 
-                        &.parentLink {
-                          padding: 0;
-                          background: $data-arrow-back-blue-svg no-repeat left;
-                          background-size: 0.875rem 0.875rem;
-                          background-position-y: 5px;
-                          margin-bottom: 10px;
+                          &.parentLink {
+                            padding: 0;
+                            background: $data-arrow-back-blue-svg no-repeat left;
+                            background-size: 0.875rem 0.875rem;
+                            background-position-y: 5px;
+                            margin-bottom: 10px;
 
-                          a {
-                            padding-left: 1.313rem;
-                            font-size: 1rem;
-                            display: block;
+                            a {
+                              padding-left: 1.313rem;
+                              font-size: 1rem;
+                              display: block;
+                            }
                           }
                         }
                       }
                     }
-                  }
 
-                  // Styling for expandable left menu
-                  ul {
-                    &.nav {
-                      &.nav-list {
-                        &.expandable {
-                          li {
-                            &.nav-item {
-                              width: 100%;
-
-                              &.node {
-                                &.expanded {
-                                  background: none;
-                                }
+                    // Styling for expandable left menu
+                    ul {
+                      &.nav {
+                        &.nav-list {
+                          &.expandable {
+                            li {
+                              &.nav-item {
+                                width: 100%;
+
+                                &.node {
+                                  &.expanded {
+                                    background: none;
+                                  }
 
-                                ul.nav-list {
-                                  border-top: 1px solid $borderGrey;
-                                  padding: 7px 0 0 20px;
-                                  margin-top: 7px;
+                                  ul.nav-list {
+                                    border-top: 1px solid $borderGrey;
+                                    padding: 7px 0 0 20px;
+                                    margin-top: 7px;
+                                  }
                                 }
-                              }
 
-                              &.leaf {
-                                a,
-                                span {
-                                  &.nav-link {
-                                    padding: 7px 0;
-                                    color: $black;
+                                &.leaf {
+                                  a,
+                                  span {
+                                    &.nav-link {
+                                      padding: 7px 0;
+                                      color: $black;
+                                    }
                                   }
                                 }
                               }
@@ -176,89 +177,89 @@
           }
         }
       }
-    }
 
-    ul {
-      &.nav {
-        li {
-          &.nav-item {
-            width: 250px;
-
-            &.ancestor {
-              a {
-                &.nav-link {
-                  font-weight: 600;
-                  line-height: 1.375;
-                  margin-top: 0;
-                  margin-bottom: 0;
-                  padding: 0 0 11px 4px;
-
-                  @media (min-width: 768px) {
-                    font-size: 1.25rem;
+      ul {
+        &.nav {
+          li {
+            &.nav-item {
+              width: 250px;
+
+              &.ancestor {
+                a {
+                  &.nav-link {
+                    font-weight: 600;
+                    line-height: 1.375;
+                    margin-top: 0;
+                    margin-bottom: 0;
+                    padding: 0 0 11px 4px;
+
+                    @media (min-width: 768px) {
+                      font-size: 1.25rem;
+                    }
                   }
                 }
               }
-            }
 
-            &.selected {
-              font-weight: 600 !important;
+              &.selected {
+                font-weight: 600 !important;
 
-              a,
-              span {
-                &.nav-link {
-                  padding: 6px 0;
+                a,
+                span {
+                  &.nav-link {
+                    padding: 6px 0;
+                  }
                 }
               }
-            }
 
-            &.leaf {
-              a {
-                &.nav-link {
-                  padding: 6px 0;
-                  color: $black;
+              &.leaf {
+                a {
+                  &.nav-link {
+                    padding: 6px 0;
+                    color: $black;
+                  }
                 }
               }
-            }
-
-            &.node {
-              background: $data-arrow-next-black-svg no-repeat right;
-              background-size: 14px 14px;
-              background-position: 100% 14px;
 
-              &.expandable {
-                background: $data-arrow-expand-black-svg no-repeat right;
-                background-size: 9px 14px;
+              &.node {
+                background: $data-arrow-next-black-svg no-repeat right;
+                background-size: 14px 14px;
                 background-position: 100% 14px;
+
+                &.expandable {
+                  background: $data-arrow-expand-black-svg no-repeat right;
+                  background-size: 9px 14px;
+                  background-position: 100% 14px;
+                }
               }
             }
           }
         }
       }
-    }
 
-    &.col {
-      flex: 0 0 300px;
-      max-width: 300px;
-      padding-left: 3 * $gutter;
+      &.col {
+        flex: 0 0 300px;
+        max-width: 300px;
+        padding-left: 3 * $gutter;
+      }
     }
   }
-}
 
-.container {
-  &.start,
-  &.department.standard {
-    &.withMainMenu {
-      #mainMenu {
-        &.col {
-          //padding-left: 2 * $gutter;
-
-          &.navbar {
-            &.navbar-expand-lg {
-              &.navbar-light {
-                padding: 0 $gutter $gutter;
-
-                @media (min-width: 992px) {
-                  padding: 0 20px $gutter 2 * $gutter;
+  .container {
+    &.start,
+    &.department.standard {
+      &.withMainMenu {
+        #mainMenu {
+          &.col {
+            //padding-left: 2 * $gutter;
+
+            &.navbar {
+              &.navbar-expand-lg {
+                &.navbar-light {
+                  padding: 0 $gutter $gutter;
+
+                  @media (min-width: 992px) {
+                    padding: 0 20px $gutter 2 * $gutter;
+                  }
                 }
               }
             }
diff --git a/public/sass/custom/common/_focus.scss b/public/sass/custom/common/_focus.scss
index 94675bf..043023d 100644
--- a/public/sass/custom/common/_focus.scss
+++ b/public/sass/custom/common/_focus.scss
@@ -1,36 +1,38 @@
 // Set browser native outline when a focusable element gets focus
-iframe:focus,
-iframe:active,
-[tabindex]:not(body):focus,
-[tabindex]:not(body):active,
-button:not([disabled]):focus,
-button:not([disabled]):active,
-input:not([disabled]):focus,
-input:not([disabled]):active,
-select:not([disabled]):focus,
-select:not([disabled]):active,
-textarea:not([disabled]):focus,
-textarea:not([disabled]):active,
-input[type='checkbox']:not([disabled]):focus ~ label:before,
-input[type='radio']:not([disabled]):focus ~ label:before {
-  outline-width: thin;
-  outline-style: dotted;
-  outline: 5px auto Highlight;
-  outline: 5px auto -webkit-focus-ring-color;
-  outline-offset: 3px;
-  box-shadow: none;
-}
-#webform iframe:focus {
-  outline: none;
-}
-#webform iframe:active {
-  outline: none;
-}
+@layer kth-style.old {
+  iframe:focus,
+  iframe:active,
+  [tabindex]:not(body):focus,
+  [tabindex]:not(body):active,
+  button:not([disabled]):focus,
+  button:not([disabled]):active,
+  input:not([disabled]):focus,
+  input:not([disabled]):active,
+  select:not([disabled]):focus,
+  select:not([disabled]):active,
+  textarea:not([disabled]):focus,
+  textarea:not([disabled]):active,
+  input[type='checkbox']:not([disabled]):focus ~ label:before,
+  input[type='radio']:not([disabled]):focus ~ label:before {
+    outline-width: thin;
+    outline-style: dotted;
+    outline: 5px auto Highlight;
+    outline: 5px auto -webkit-focus-ring-color;
+    outline-offset: 3px;
+    box-shadow: none;
+  }
+  #webform iframe:focus {
+    outline: none;
+  }
+  #webform iframe:active {
+    outline: none;
+  }
 
-/* This needs to be separated from the above block due to legacy msedge problem */
-[href]:focus,
-[href]:active {
-  outline: 5px auto Highlight;
-  outline: 5px auto -webkit-focus-ring-color;
-  outline-offset: 3px;
+  /* This needs to be separated from the above block due to legacy msedge problem */
+  [href]:focus,
+  [href]:active {
+    outline: 5px auto Highlight;
+    outline: 5px auto -webkit-focus-ring-color;
+    outline-offset: 3px;
+  }
 }
diff --git a/public/sass/custom/common/lists.scss b/public/sass/custom/common/lists.scss
index 5ae8a8d..a8605ed 100644
--- a/public/sass/custom/common/lists.scss
+++ b/public/sass/custom/common/lists.scss
@@ -1,10 +1,12 @@
-.link-list {
-  list-style-type: none;
-  padding-left: 0;
-  margin: 0;
+@layer kth-style.old {
+  .link-list {
+    list-style-type: none;
+    padding-left: 0;
+    margin: 0;
 
-  li {
-    margin-bottom: 14px;
-    line-height: 1.5;
+    li {
+      margin-bottom: 14px;
+      line-height: 1.5;
+    }
   }
 }
diff --git a/public/sass/custom/commonStyle.scss b/public/sass/custom/commonStyle.scss
index fbb3e27..0f4c54b 100644
--- a/public/sass/custom/commonStyle.scss
+++ b/public/sass/custom/commonStyle.scss
@@ -1,121 +1,123 @@
 // KTH specific styling
 
 // To override personal menu top margin in print.
-html {
-  body {
-    @media print {
-      margin-top: 0 !important;
+@layer kth-style.old {
+  html {
+    body {
+      @media print {
+        margin-top: 0 !important;
+      }
     }
   }
-}
 
-body {
-  .container {
-    &.withMainMenu {
-      > .row {
-        width: 100%;
-        padding: 0;
-        margin: 0;
-
-        &:first-of-type {
-          flex-direction: row-reverse;
-          flex-wrap: nowrap;
+  body {
+    .container {
+      &.withMainMenu {
+        > .row {
+          width: 100%;
+          padding: 0;
+          margin: 0;
+
+          &:first-of-type {
+            flex-direction: row-reverse;
+            flex-wrap: nowrap;
+          }
         }
       }
-    }
 
-    &.main {
-      max-width: $widePageWidth;
-      margin: 0 auto;
+      &.main {
+        max-width: $widePageWidth;
+        margin: 0 auto;
 
-      @media (min-width: 768px) {
-        margin: 0 $gutter;
-        max-width: calc(100% - 2 * #{$gutter});
-      }
+        @media (min-width: 768px) {
+          margin: 0 $gutter;
+          max-width: calc(100% - 2 * #{$gutter});
+        }
 
-      @media (min-width: 1258px) {
-        max-width: 1228px;
-        margin: 0 auto;
+        @media (min-width: 1258px) {
+          max-width: 1228px;
+          margin: 0 auto;
+        }
       }
     }
-  }
 
-  .container,
-  .container-fluid {
-    padding: 0 $gutter; // Gutter should be the same in all break points.
+    .container,
+    .container-fluid {
+      padding: 0 $gutter; // Gutter should be the same in all break points.
+    }
   }
-}
 
-.lead {
-  font-size: 1.125rem;
-  font-weight: 400;
-  line-height: 1.4375;
-  margin: 0 0 22px;
+  .lead {
+    font-size: 1.125rem;
+    font-weight: 400;
+    line-height: 1.4375;
+    margin: 0 0 22px;
 
-  @media (min-width: 768px) {
-    font-size: 1.375rem;
+    @media (min-width: 768px) {
+      font-size: 1.375rem;
+    }
   }
-}
 
-.paragraphs {
-  p:not(.calendar) {
-    margin: 0 0 27px;
-    max-width: 730px;
+  .paragraphs {
+    p:not(.calendar) {
+      margin: 0 0 27px;
+      max-width: 730px;
+    }
   }
-}
 
-table {
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.5;
-  margin-top: 0; 
-  margin-bottom: 14px;
+  table {
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    margin-top: 0; 
+    margin-bottom: 14px;
 
-  p {
-    margin-bottom: 0;
+    p {
+      margin-bottom: 0;
+    }
   }
-}
 
-p {
-  &.AlignLeft {
-    text-align: left;
-  }
+  p {
+    &.AlignLeft {
+      text-align: left;
+    }
 
-  &.AlignCenter {
-    text-align: center;
-  }
+    &.AlignCenter {
+      text-align: center;
+    }
 
-  &.AlignRight {
-    text-align: right;
-  }
+    &.AlignRight {
+      text-align: right;
+    }
 
-  &.AlignJustify {
-    text-align: justify;
+    &.AlignJustify {
+      text-align: justify;
+    }
   }
-}
 
-a {
-  &.skipToMainContent {
-    left: -999px;
-    position: absolute;
-    top: auto;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-    z-index: -999;
-
-    &:focus,
-    &:active {
-      background-color: $white;
-      color: $linkBlue;
-      left: 0;
-      top: 0;
-      width: auto;
-      height: auto;
-      overflow: auto;
-      padding: 5px;
-      font-size: 1rem;
-      z-index: 99999;
+  a {
+    &.skipToMainContent {
+      left: -999px;
+      position: absolute;
+      top: auto;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      z-index: -999;
+
+      &:focus,
+      &:active {
+        background-color: $white;
+        color: $linkBlue;
+        left: 0;
+        top: 0;
+        width: auto;
+        height: auto;
+        overflow: auto;
+        padding: 5px;
+        font-size: 1rem;
+        z-index: 99999;
+      }
     }
   }
 }
diff --git a/public/sass/custom/component/collapse.scss b/public/sass/custom/component/collapse.scss
index 77b5c18..d749aab 100644
--- a/public/sass/custom/component/collapse.scss
+++ b/public/sass/custom/component/collapse.scss
@@ -21,72 +21,74 @@
 }
 
 // Collapse with <details> and <summary> tags
-details {
-  margin-bottom: 1.875rem;
-  &[open] {
-    > summary {
-      &:before {
-        animation: rotateDown 1ms ease-in-out forwards;
-      }
-      &:hover:before {
-        animation-duration: 0.3s;
+@layer kth-style.old {
+  details {
+    margin-bottom: 1.875rem;
+    &[open] {
+      > summary {
+        &:before {
+          animation: rotateDown 1ms ease-in-out forwards;
+        }
+        &:hover:before {
+          animation-duration: 0.3s;
+        }
       }
     }
-  }
 
-  summary {
-    border-radius: 0.25rem;
-    font-size: 1rem;
-    height: auto;
-    min-height: 2.75rem;
-    list-style: none;
-    padding: 0.638rem 1.25rem;
+    summary {
+      border-radius: 0.25rem;
+      font-size: 1rem;
+      height: auto;
+      min-height: 2.75rem;
+      list-style: none;
+      padding: 0.638rem 1.25rem;
 
-    // Chrome specific due to no support for list-style: none on summary tag.
-    &::-webkit-details-marker {
-      display: none;
-    }
+      // Chrome specific due to no support for list-style: none on summary tag.
+      &::-webkit-details-marker {
+        display: none;
+      }
 
-    // Add a top margin to the element after the summary.
-    + *:nth-child(2) {
-      margin-top: 1.25rem;
-    }
+      // Add a top margin to the element after the summary.
+      + *:nth-child(2) {
+        margin-top: 1.25rem;
+      }
 
-    &:before {
-      content: '';
-      height: 1rem;
-      width: 1rem;
-      display: inline-block;
-      margin: auto;
-      margin-bottom: -3px;
-      margin-right: 8px;
-      background-size: contain;
-      background-repeat: no-repeat;
-      animation: rotateUp 0.3s ease-in-out forwards;
-      animation-duration: 1ms;
-    }
-    &:hover:before {
-      text-decoration: none;
-      animation-duration: 0.3s;
-    }
+      &:before {
+        content: '';
+        height: 1rem;
+        width: 1rem;
+        display: inline-block;
+        margin: auto;
+        margin-bottom: -3px;
+        margin-right: 8px;
+        background-size: contain;
+        background-repeat: no-repeat;
+        animation: rotateUp 0.3s ease-in-out forwards;
+        animation-duration: 1ms;
+      }
+      &:hover:before {
+        text-decoration: none;
+        animation-duration: 0.3s;
+      }
 
-    &.blue {
-      background-color: $blue;
-      color: $white;
-      font-weight: 600;
+      &.blue {
+        background-color: $blue;
+        color: $white;
+        font-weight: 600;
 
-      &:before {
-        background-image: $data-arrow-expand-white-svg;
+        &:before {
+          background-image: $data-arrow-expand-white-svg;
+        }
       }
-    }
 
-    &.white {
-      background-color: $white;
-      color: $linkBlue;
-      padding-left: 0;
+      &.white {
+        background-color: $white;
+        color: $linkBlue;
+        padding-left: 0;
 
-      &:before {
-        background-image: $data-arrow-expand-blue-svg;
+        &:before {
+          background-image: $data-arrow-expand-blue-svg;
+        }
       }
     }
   }
diff --git a/public/sass/custom/component/tabs.scss b/public/sass/custom/component/tabs.scss
index ce207f6..a7260ce 100644
--- a/public/sass/custom/component/tabs.scss
+++ b/public/sass/custom/component/tabs.scss
@@ -1,81 +1,83 @@
-.tab-bar-container {
-  margin-left: 0;
-  margin-right: 0;
-  border-bottom: 1px solid $borderGrey;
-  flex-direction: column-reverse;
+@layer kth-style.old {
+  .tab-bar-container {
+    margin-left: 0;
+    margin-right: 0;
+    border-bottom: 1px solid $borderGrey;
+    flex-direction: column-reverse;
 
-  @media (min-width: 992px) {
-    flex-direction: row;
-  }
+    @media (min-width: 992px) {
+      flex-direction: row;
+    }
 
-  & > .col {
-    padding: 0;
+    & > .col {
+      padding: 0;
 
-    @media (min-width: 768px) {
-      padding: 0 15px;
-      padding-left: 0;
-    }
+      @media (min-width: 768px) {
+        padding: 0 15px;
+        padding-left: 0;
+      }
 
-    &:last-of-type {
-      padding-right: 0;
+      &:last-of-type {
+        padding-right: 0;
+      }
     }
-  }
-
-  .col {
-    margin-bottom: -1px;
-    max-width: 100%;
-  }
 
-  .nav {
-    &.nav-tabs {
-      overflow-y: hidden;
-      flex-wrap: nowrap;
+    .col {
+      margin-bottom: -1px;
+      max-width: 100%;
+    }
 
-      @media (min-width: 992px) {
-        overflow: initial;
+    .nav {
+      &.nav-tabs {
+        overflow-y: hidden;
         flex-wrap: nowrap;
-      }
 
-      & > li {
-        margin-bottom: 0;
-      }
+        @media (min-width: 992px) {
+          overflow: initial;
+          flex-wrap: nowrap;
+        }
+
+        & > li {
+          margin-bottom: 0;
+        }
 
-      .nav-link {
-        font-size: 1rem;
-        margin-right: 5px;
-        border-style: solid;
-        border-color: $borderGrey;
-        border-radius: 0.25rem 0.25rem 0 0;
-        background-color: $lightGrey;
-        cursor: pointer;
-        padding: 8px 20px 8px 20px;
-        position: relative;
-        top: 5px;
-        color: $black;
-        white-space: nowrap;
+        .nav-link {
+          font-size: 1rem;
+          margin-right: 5px;
+          border-style: solid;
+          border-color: $borderGrey;
+          border-radius: 0.25rem 0.25rem 0 0;
+          background-color: $lightGrey;
+          cursor: pointer;
+          padding: 8px 20px 8px 20px;
+          position: relative;
+          top: 5px;
+          color: $black;
+          white-space: nowrap;
 
-        &.active {
-          background-color: $white;
-          font-weight: 700;
-          border-bottom: 1px solid $white;
-          padding: 13px 20px 8px 20px;
-          top: 0;
+          &.active {
+            background-color: $white;
+            font-weight: 700;
+            border-bottom: 1px solid $white;
+            padding: 13px 20px 8px 20px;
+            top: 0;
+          }
         }
       }
     }
   }
-}
-.tab-content {
-  border: 1px solid $borderGrey;
-  border-top: none;
-  border-radius: 0 0 0.25rem 0.25rem;
+  .tab-content {
+    border: 1px solid $borderGrey;
+    border-top: none;
+    border-radius: 0 0 0.25rem 0.25rem;
 
-  .tab-pane {
-    padding: 20px;
+    .tab-pane {
+      padding: 20px;
+    }
   }
-}
 
-// -- KTH Style override
-.tab-content .tab-pane {
-  border: none;
+  // -- KTH Style override
+  .tab-content .tab-pane {
+    border: none;
+  }
 }
diff --git a/public/sass/custom/component/well.scss b/public/sass/custom/component/well.scss
index a324509..667c50b 100644
--- a/public/sass/custom/component/well.scss
+++ b/public/sass/custom/component/well.scss
@@ -1,25 +1,27 @@
-.well {
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
-  background-color: #f5f5f5;
-  border: 1px solid #e3e3e3;
-  border-radius: 4px;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
-  margin-bottom: 20px;
-  min-height: 20px;
-  padding: 19px;
+@layer kth-style.old {
+  .well {
+    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
+    background-color: #f5f5f5;
+    border: 1px solid #e3e3e3;
+    border-radius: 4px;
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
+    margin-bottom: 20px;
+    min-height: 20px;
+    padding: 19px;
 
-  blockquote {
-    border-color: #ddd;
-    border-color: rgba(0, 0, 0, .15);
+    blockquote {
+      border-color: #ddd;
+      border-color: rgba(0, 0, 0, .15);
+    }
   }
-}
 
-.well-lg {
-  border-radius: 6px;
-  padding: 24px;
-}
+  .well-lg {
+    border-radius: 6px;
+    padding: 24px;
+  }
 
-.well-sm {
-  border-radius: 3px;
-  padding: 9px;
+  .well-sm {
+    border-radius: 3px;
+    padding: 9px;
+  }
 }
diff --git a/public/sass/custom/kth-klaro.scss b/public/sass/custom/kth-klaro.scss
index 55f12b4..2a5eac9 100644
--- a/public/sass/custom/kth-klaro.scss
+++ b/public/sass/custom/kth-klaro.scss
@@ -1,334 +1,336 @@
 // Overrides the default Klaro style for consent modal.
 
-.klaro {
-  // Videos
-  .context-notice {
-    background: rgba(255, 255, 255, 0.9);
-    flex-wrap: nowrap;
-    border-radius: 0;
-
-    .cm-btn {
-      padding: 0.5rem 1.5rem;
-      line-height: 1.5;
-      border-radius: 0.25rem;
-      min-height: 2.75rem;
-      font-weight: bold;
-      font-size: 1rem;
-
-      &.cm-btn-success-var {
-        color: $white;
-        background-color: $blue;
-        border-color: $blue;
-        border: 1px solid transparent;
-      }
-
-      &.cm-btn-success {
-        color: $black;
-        background-color: $white;
-        border-color: $black;
-        border: 1px solid;
-      }
-    }
-  }
+@layer kth-style.old {
+  .klaro {
+    // Videos
+    .context-notice {
+      background: rgba(255, 255, 255, 0.9);
+      flex-wrap: nowrap;
+      border-radius: 0;
 
-  .cookie-modal {
-    .cm-btm {
-      &.cm-btm-success {
-        color: $white;
-        background-color: $blue;
-        border-color: $blue;
-        border: 1px solid transparent;
+      .cm-btn {
         padding: 0.5rem 1.5rem;
         line-height: 1.5;
         border-radius: 0.25rem;
         min-height: 2.75rem;
         font-weight: bold;
         font-size: 1rem;
+
+        &.cm-btn-success-var {
+          color: $white;
+          background-color: $blue;
+          border-color: $blue;
+          border: 1px solid transparent;
+        }
+
+        &.cm-btn-success {
+          color: $black;
+          background-color: $white;
+          border-color: $black;
+          border: 1px solid;
+        }
       }
     }
-  }
-}
 
-.klaro {
-  .cookie-notice {
-    &:not(.cookie-modal-notice) {
-      position: fixed;
-      width: 100vw;
-      max-width: 100vw;
-      height: 100vh;
-      right: 0;
-      top: 0;
-      left: 0;
-      background: rgba(0, 0, 0, 0.5);
-      border-radius: 0;
-      z-index: 99999;
+    .cookie-modal {
+      .cm-btm {
+        &.cm-btm-success {
+          color: $white;
+          background-color: $blue;
+          border-color: $blue;
+          border: 1px solid transparent;
+          padding: 0.5rem 1.5rem;
+          line-height: 1.5;
+          border-radius: 0.25rem;
+          min-height: 2.75rem;
+          font-weight: bold;
+          font-size: 1rem;
+        }
+      }
+    }
+  }
 
-      .cn-body {
-        font-size: 1rem;
-        padding: 1.5rem;
-        padding-top: 0.5rem;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        width: 554px;
-        height: fit-content;
-        max-width: 554px;
-        background-color: $white;
-        border-radius: 0.25rem;
-        box-shadow: 0 4px 6px 0 rgb(0 0 0 / 20%), 5px 5px 10px 0 rgb(0 0 0 / 19%);
+  .klaro {
+    .cookie-notice {
+      &:not(.cookie-modal-notice) {
+        position: fixed;
+        width: 100vw;
+        max-width: 100vw;
+        height: 100vh;
+        right: 0;
+        top: 0;
+        left: 0;
+        background: rgba(0, 0, 0, 0.5);
+        border-radius: 0;
+        z-index: 99999;
+
+        .cn-body {
+          font-size: 1rem;
+          padding: 1.5rem;
+          padding-top: 0.5rem;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          width: 554px;
+          height: fit-content;
+          max-width: 554px;
+          background-color: $white;
+          border-radius: 0.25rem;
+          box-shadow: 0 4px 6px 0 rgb(0 0 0 / 20%), 5px 5px 10px 0 rgb(0 0 0 / 19%);
 
-        .cn-ok {
-          flex-flow: column !important;
-        }
+          .cn-ok {
+            flex-flow: column !important;
+          }
 
-        .cn-buttons {
-          button {
-            &.cm-btn {
-              @media (max-width: 384px) {
-                width: auto;
-              }
+          .cn-buttons {
+            button {
+              &.cm-btn {
+                @media (max-width: 384px) {
+                  width: auto;
+                }
 
-              &.cm-btn-danger {
-                &.cn-decline {
-                  display: none;
+                &.cm-btn-danger {
+                  &.cn-decline {
+                    display: none;
+                  }
                 }
               }
             }
           }
-        }
 
-        @media (max-width: 768px) {
-          position: relative;
-          top: 30%;
-          width: 90%;
-          height: auto;
+          @media (max-width: 768px) {
+            position: relative;
+            top: 30%;
+            width: 90%;
+            height: auto;
+          }
         }
       }
-    }
-
-    a {
-      color: $blue;
-    }
 
-    p {
-      color: $black;
-    }
+      a {
+        color: $blue;
+      }
 
-    .cm-link {
-      color: $blue;
-    }
+      p {
+        color: $black;
+      }
 
-    .cm-btn {
-      &.cm-btn-success {
-        color: $white;
-        background-color: $blue;
-        border-color: $blue;
-        border: 1px solid transparent;
-        padding: 0.5rem 1.5rem;
-        line-height: 1.5;
-        border-radius: 0.25rem;
-        min-height: 2.75rem;
-        font-weight: bold;
-        font-size: 1rem;
+      .cm-link {
+        color: $blue;
       }
-    }
-  }
 
-  .cookie-modal {
-    z-index: 99999;
-    .cm-list-input.required:checked + .cm-list-label .slider {
-      background-color: $green;
+      .cm-btn {
+        &.cm-btn-success {
+          color: $white;
+          background-color: $blue;
+          border-color: $blue;
+          border: 1px solid transparent;
+          padding: 0.5rem 1.5rem;
+          line-height: 1.5;
+          border-radius: 0.25rem;
+          min-height: 2.75rem;
+          font-weight: bold;
+          font-size: 1rem;
+        }
+      }
     }
 
-    .cm-list-input.only-required + .cm-list-label .slider {
-      background-color: $grey;
-      opacity: 0.5;
-    }
+    .cookie-modal {
+      z-index: 99999;
+      .cm-list-input.required:checked + .cm-list-label .slider {
+        background-color: $green;
+      }
 
-    .cm-list-label {
-      .slider {
+      .cm-list-input.only-required + .cm-list-label .slider {
         background-color: $grey;
-        &:before {
-          background-color: $white;
-        }
+        opacity: 0.5;
       }
-    }
 
-    .cm-list-input:checked {
-      + .cm-list-label {
+      .cm-list-label {
         .slider {
-          background-color: $green;
+          background-color: $grey;
+          &:before {
+            background-color: $white;
+          }
         }
       }
-    }
-    .cm-list-input.required:checked {
-      + .cm-list-label {
-        .slider {
-          background-color: #97b566;
+
+      .cm-list-input:checked {
+        + .cm-list-label {
+          .slider {
+            background-color: $green;
+          }
+        }
+      }
+      .cm-list-input.required:checked {
+        + .cm-list-label {
+          .slider {
+            background-color: #97b566;
+          }
         }
       }
-    }
 
-    a {
-      color: $blue;
-    }
-    .cm-modal {
-      &.cm-klaro {
-        background-color: $white;
-        max-width: 794px;
+      a {
+        color: $blue;
       }
+      .cm-modal {
+        &.cm-klaro {
+          background-color: $white;
+          max-width: 794px;
+        }
 
-      .hide {
-        svg {
-          stroke: var(--bs-dark, #fafafa);
+        .hide {
+          svg {
+            stroke: var(--bs-dark, #fafafa);
+          }
         }
-      }
 
-      p {
-        color: $black;
-        font-size: 1rem;
-        line-height: 1.5;
-      }
+        p {
+          color: $black;
+          font-size: 1rem;
+          line-height: 1.5;
+        }
 
-      li {
-        color: $black;
-        &.active {
-          border: 3px solid $blue;
+        li {
+          color: $black;
+          &.active {
+            border: 3px solid $blue;
+          }
         }
-      }
 
-      .cm-header {
-        padding: 1.5rem;
-
-        h1 {
-          &.title {
-            font-size: 1.875rem;
-            font-weight: 400;
-            color: $black;
-            line-height: 1.3125;
-            margin-top: 0;
-            margin-bottom: 14px;
+        .cm-header {
+          padding: 1.5rem;
+
+          h1 {
+            &.title {
+              font-size: 1.875rem;
+              font-weight: 400;
+              color: $black;
+              line-height: 1.3125;
+              margin-top: 0;
+              margin-bottom: 14px;
+            }
           }
         }
-      }
 
-      .cm-body {
-        padding: 1.5rem;
-
-        ul {
-          &.cm-services {
-            li {
-              &.cm-service {
-                span {
-                  &.cm-list-title {
-                    color: $black;
-                    font-size: 1rem;
-                  }
-                  &.cm-required {
-                    color: $black;
-                    font-size: 1rem;
+        .cm-body {
+          padding: 1.5rem;
+
+          ul {
+            &.cm-services {
+              li {
+                &.cm-service {
+                  span {
+                    &.cm-list-title {
+                      color: $black;
+                      font-size: 1rem;
+                    }
+                    &.cm-required {
+                      color: $black;
+                      font-size: 1rem;
+                    }
                   }
                 }
               }
             }
           }
         }
-      }
-      .cm-footer {
-        .cm-powered-by a {
-          display: none;
-        }
-
-        @media (max-width: 768px) {
-          padding: 0 1rem;
+        .cm-footer {
+          .cm-powered-by a {
+            display: none;
+          }
 
-          .cm-footer-buttons {
-            display: block;
-            width: 100%;
+          @media (max-width: 768px) {
+            padding: 0 1rem;
 
-            .cm-btn {
+            .cm-footer-buttons {
+              display: block;
               width: 100%;
-              margin-top: 1.4rem;
+
+              .cm-btn {
+                width: 100%;
+                margin-top: 1.4rem;
+              }
             }
           }
         }
       }
-    }
-    .cm-btn {
-      &.cm-btn-success {
-        color: $white;
-        background-color: $blue;
-        border-color: $blue;
-        border: 1px solid transparent;
-        padding: 0.5rem 1.5rem;
-        line-height: 1.5;
-        border-radius: 0.25rem;
-        min-height: 2.75rem;
-        font-weight: bold;
-        font-size: 1rem;
-
-        &.cm-btn-accept {
-          background-color: $green;
-          border-color: $green;
+      .cm-btn {
+        &.cm-btn-success {
+          color: $white;
+          background-color: $blue;
+          border-color: $blue;
+          border: 1px solid transparent;
+          padding: 0.5rem 1.5rem;
+          line-height: 1.5;
+          border-radius: 0.25rem;
+          min-height: 2.75rem;
+          font-weight: bold;
+          font-size: 1rem;
+
+          &.cm-btn-accept {
+            background-color: $green;
+            border-color: $green;
+          }
         }
-      }
 
-      &.cm-btn-decline {
-        color: $black;
-        background-color: $white;
-        border-color: $black;
-        border: 1px solid;
-        padding: 0.5rem 1.5rem;
-        line-height: 1.5;
-        border-radius: 0.25rem;
-        min-height: 2.75rem;
-        font-weight: bold;
-        font-size: 1rem;
+        &.cm-btn-decline {
+          color: $black;
+          background-color: $white;
+          border-color: $black;
+          border: 1px solid;
+          padding: 0.5rem 1.5rem;
+          line-height: 1.5;
+          border-radius: 0.25rem;
+          min-height: 2.75rem;
+          font-weight: bold;
+          font-size: 1rem;
+        }
       }
     }
   }
-}
 
-/*
- * Handle videos in columnsplitters agrid lists with 4 columns.
- */
-.block {
-  &.columnSplitter {
-    &.row {
-      &.using4Columns {
-        .klaro {
-          .context-notice {
-            p {
-              font-size: 0.9rem;
-              margin-bottom: 0;
-            }
+  /*
+  * Handle videos in columnsplitters agrid lists with 4 columns.
+  */
+  .block {
+    &.columnSplitter {
+      &.row {
+        &.using4Columns {
+          .klaro {
+            .context-notice {
+              p {
+                font-size: 0.9rem;
+                margin-bottom: 0;
+              }
 
-            .cm-btn {
-              margin-bottom: 4px;
-              min-height: 1.75rem;
-              padding: 0.3rem 0.6rem;
+              .cm-btn {
+                margin-bottom: 4px;
+                min-height: 1.75rem;
+                padding: 0.3rem 0.6rem;
+              }
             }
           }
         }
       }
     }
-  }
 
-  &.list {
-    &.grid {
-      .gridRowItem {
-        &.gridRowItem_4 {
-          .context-notice {
-            p {
-              font-size: 0.9rem;
-              margin-bottom: 0;
-            }
+    &.list {
+      &.grid {
+        .gridRowItem {
+          &.gridRowItem_4 {
+            .context-notice {
+              p {
+                font-size: 0.9rem;
+                margin-bottom: 0;
+              }
 
-            .cm-btn {
-              margin-bottom: 4px;
-              min-height: 1.75rem;
-              padding: 0.3rem 0.6rem;
+              .cm-btn {
+                margin-bottom: 4px;
+                min-height: 1.75rem;
+                padding: 0.3rem 0.6rem;
+              }
             }
           }
         }
diff --git a/public/sass/custom/slots/articleNavigation.scss b/public/sass/custom/slots/articleNavigation.scss
index 83a3fe0..b13159f 100644
--- a/public/sass/custom/slots/articleNavigation.scss
+++ b/public/sass/custom/slots/articleNavigation.scss
@@ -1,52 +1,54 @@
-body {
-  .container,
-  .container-fluid {
-    &.articleNavigation {
-      padding: $gutter;
-      width: 100%;
-      max-width: 100%;
-      margin: 0;
-      padding: $gutter $gutter 0;
+@layer kth-style.old {
+  body {
+    .container,
+    .container-fluid {
+      &.articleNavigation {
+        padding: $gutter;
+        width: 100%;
+        max-width: 100%;
+        margin: 0;
+        padding: $gutter $gutter 0;
 
-      &.empty {
-        display: none;
-      }
+        &.empty {
+          display: none;
+        }
 
-      &.noTranslation {
-        display: none;
+        &.noTranslation {
+          display: none;
+        }
       }
     }
-  }
 
-  @media (min-width: 768px) {
-    .container {
-      &.articleNavigation {
-        max-width: calc(100% - 2 * #{$gutter});
-        margin: 0 $gutter;
+    @media (min-width: 768px) {
+      .container {
+        &.articleNavigation {
+          max-width: calc(100% - 2 * #{$gutter});
+          margin: 0 $gutter;
+        }
       }
     }
-  }
 
-  @media (min-width: 992px) {
-    .container,
-    .container-fluid {
-      &.articleNavigation {
-        padding: $gutter 2 * $gutter 0;
+    @media (min-width: 992px) {
+      .container,
+      .container-fluid {
+        &.articleNavigation {
+          padding: $gutter 2 * $gutter 0;
 
-        &.noTranslation {
-          display: block;
-          //padding: $gutter 2 * $gutter;
+          &.noTranslation {
+            display: block;
+            //padding: $gutter 2 * $gutter;
+          }
         }
       }
     }
-  }
 
-  @media (min-width: 1258px) {
-    .container,
-    .container-fluid {
-      &.articleNavigation {
-        max-width: 1228px;
-        margin: 0 auto;
+    @media (min-width: 1258px) {
+      .container,
+      .container-fluid {
+        &.articleNavigation {
+          max-width: 1228px;
+          margin: 0 auto;
+        }
       }
     }
   }
diff --git a/public/sass/custom/slots/breadcrumbs.scss b/public/sass/custom/slots/breadcrumbs.scss
index c880c61..5e1e59f 100644
--- a/public/sass/custom/slots/breadcrumbs.scss
+++ b/public/sass/custom/slots/breadcrumbs.scss
@@ -1,24 +1,26 @@
-#breadcrumbs {
-  ol {
-    padding: 0;
-    margin: 0;
+@layer kth-style.old {
+  #breadcrumbs {
+    ol {
+      padding: 0;
+      margin: 0;
 
-    &.breadcrumb {
-      display: none;
-    }
-
-    @media (min-width: 992px) {
       &.breadcrumb {
-        display: flex;
-        background-color: $white;
-        border-radius: 0;
+        display: none;
+      }
+
+      @media (min-width: 992px) {
+        &.breadcrumb {
+          display: flex;
+          background-color: $white;
+          border-radius: 0;
 
-        li {
-          font-size: 1rem;
+          li {
+            font-size: 1rem;
 
-          &.breadcrumb-item {
-            a {
-              font-size: 1rem;
+            &.breadcrumb-item {
+              a {
+                font-size: 1rem;
+              }
             }
           }
         }
diff --git a/public/sass/custom/slots/footer.scss b/public/sass/custom/slots/footer.scss
index ab32a04..4338455 100644
--- a/public/sass/custom/slots/footer.scss
+++ b/public/sass/custom/slots/footer.scss
@@ -1,83 +1,85 @@
-footer {
-  &.container {
-    background-color: $grey;
-    max-width: 100%;
-    margin: 0;
-    padding: $gutter;
-
-    .container {
+@layer kth-style.old {
+  footer {
+    &.container {
       background-color: $grey;
-    }
+      max-width: 100%;
+      margin: 0;
+      padding: $gutter;
 
-    .block {
-      &.columnSplitter {
-        padding: 0;
-
-        &.row {
-          .col {
-            flex-basis: 100%;
-
-            & a {
-              &.block {
-                &.link {
-                  color: $white;
-                  line-height: 1.4375;
-                  font-weight: 400;
-                  font-size: 1rem;
-                  margin-bottom: 14px;
-                }
-              }
-            }
+      .container {
+        background-color: $grey;
+      }
 
-            .block {
-              &.list {
-                &.links {
-                  h2 {
+      .block {
+        &.columnSplitter {
+          padding: 0;
+
+          &.row {
+            .col {
+              flex-basis: 100%;
+
+              & a {
+                &.block {
+                  &.link {
                     color: $white;
-                    font-weight: 600;
-                    font-size: 1.25rem;
-                    margin-top: 0;
+                    line-height: 1.4375;
+                    font-weight: 400;
+                    font-size: 1rem;
+                    margin-bottom: 14px;
                   }
+                }
+              }
 
-                  ul {
-                    list-style: none;
-                    padding-left: 0;
-                    margin: 0;
-                    line-height: 1.4375;
+              .block {
+                &.list {
+                  &.links {
+                    h2 {
+                      color: $white;
+                      font-weight: 600;
+                      font-size: 1.25rem;
+                      margin-top: 0;
+                    }
 
-                    li {
-                      margin-bottom: 14px;
+                    ul {
+                      list-style: none;
+                      padding-left: 0;
+                      margin: 0;
                       line-height: 1.4375;
 
-                      a {
-                        color: $white;
-                        line-height: 1.4375;
-                        font-weight: 400;
-                        font-size: 1rem;
+                      li {
                         margin-bottom: 14px;
+                        line-height: 1.4375;
+
+                        a {
+                          color: $white;
+                          line-height: 1.4375;
+                          font-weight: 400;
+                          font-size: 1rem;
+                          margin-bottom: 14px;
+                        }
                       }
                     }
                   }
                 }
-              }
 
-              &.teaser {
-                .teaserBody {
-                  h2 {
-                    color: $white;
-                    font-weight: 600;
-                    font-size: 1.25rem;
-                    margin-top: 0;
-                  }
-
-                  .lead {
-                    color: $white;
-                    font-weight: 400;
-                    font-size: 1rem;
+                &.teaser {
+                  .teaserBody {
+                    h2 {
+                      color: $white;
+                      font-weight: 600;
+                      font-size: 1.25rem;
+                      margin-top: 0;
+                    }
 
-                    p {
+                    .lead {
                       color: $white;
                       font-weight: 400;
+                      font-size: 1rem;
+
+                      p {
+                        color: $white;
+                        font-weight: 400;
+                      }
                     }
                   }
                 }
@@ -87,64 +89,64 @@ footer {
         }
       }
     }
-  }
 
-  @media (min-width: 768px) {
-    &.container {
-      max-width: calc(100% - 2 * #{$gutter});
-      padding: 2 * $gutter 0;
-      margin: 0 $gutter;
+    @media (min-width: 768px) {
+      &.container {
+        max-width: calc(100% - 2 * #{$gutter});
+        padding: 2 * $gutter 0;
+        margin: 0 $gutter;
 
-      .block {
-        &.columnSplitter {
-          padding: 0 $gutter;
+        .block {
+          &.columnSplitter {
+            padding: 0 $gutter;
 
-          &.row {
-            &.using4Columns {
-              .col {
-                flex-basis: 50%;
+            &.row {
+              &.using4Columns {
+                .col {
+                  flex-basis: 50%;
+                }
               }
             }
           }
         }
       }
     }
-  }
 
-  @media (min-width: 992px) {
-    &.container {
-      .block {
-        &.columnSplitter {
-          padding: 0 2 * $gutter;
+    @media (min-width: 992px) {
+      &.container {
+        .block {
+          &.columnSplitter {
+            padding: 0 2 * $gutter;
+          }
         }
       }
     }
-  }
 
-  @media (min-width: 1200px) {
-    &.container {
-      .block {
-        &.columnSplitter {
-          &.row {
-            &.using4Columns {
-              .col {
-                flex-basis: 25%;
+    @media (min-width: 1200px) {
+      &.container {
+        .block {
+          &.columnSplitter {
+            &.row {
+              &.using4Columns {
+                .col {
+                  flex-basis: 25%;
+                }
               }
             }
           }
         }
       }
     }
-  }
 
-  @media (min-width: 1258px) {
-    &.container {
-      max-width: $widePageWidth;
-      margin: auto;
+    @media (min-width: 1258px) {
+      &.container {
+        max-width: $widePageWidth;
+        margin: auto;
+      }
     }
-  }
 
-  @media print {
-    display: none;
+    @media print {
+      display: none;
+    }
   }
 }
diff --git a/public/sass/custom/slots/intra.scss b/public/sass/custom/slots/intra.scss
index 6254683..9bb9f1c 100644
--- a/public/sass/custom/slots/intra.scss
+++ b/public/sass/custom/slots/intra.scss
@@ -1,190 +1,192 @@
-.header-intra {
-  min-height: 165px;
+@layer kth-style.old {
+  .header-intra {
+    min-height: 165px;
 
-  #gradientBorder {
-    background-color: $grey;
-    background-image: none;
-  }
-
-  .container-fluid {
-    background-color: $grey;
+    #gradientBorder {
+      background-color: $grey;
+      background-image: none;
+    }
 
-    .container {
+    .container-fluid {
       background-color: $grey;
 
-      .header-container {
-        &__top {
-          @media (min-width: 768px) {
-            min-height: 60px;
+      .container {
+        background-color: $grey;
+
+        .header-container {
+          &__top {
+            @media (min-width: 768px) {
+              min-height: 60px;
+            }
           }
-        }
 
-        &__bottom {
-          margin-top: 13px;
+          &__bottom {
+            margin-top: 13px;
+          }
         }
-      }
 
-      .block {
-        &.figure {
-          &.mainLogo {
-            margin: 0 20px 0 0;
-            height: 50px;
+        .block {
+          &.figure {
+            &.mainLogo {
+              margin: 0 20px 0 0;
+              height: 50px;
 
-            @media (min-width: 576px) and (max-width: 991.98px) {
-              height: 64px;
-            }
+              @media (min-width: 576px) and (max-width: 991.98px) {
+                height: 64px;
+              }
 
-            @media (min-width: 992px) {
-              height: 75px;
-            }
+              @media (min-width: 992px) {
+                height: 75px;
+              }
 
-            img {
-              &.figure-img {
-                margin-bottom: 0;
-                height: 18px;
-                width: 18px;
-                top: -6px;
-                position: relative;
+              img {
+                &.figure-img {
+                  margin-bottom: 0;
+                  height: 18px;
+                  width: 18px;
+                  top: -6px;
+                  position: relative;
+                }
               }
             }
           }
         }
-      }
 
-      .block {
-        &.link {
-          font-size: 14px;
-          color: $black;
-          position: relative;
-          top: -2px;
-        }
+        .block {
+          &.link {
+            font-size: 14px;
+            color: $black;
+            position: relative;
+            top: -2px;
+          }
 
-        // secondary menu
-        &.list.links.secondaryMenu {
-          ul {
-            li {
-              a {
-                color: $white;
-
-                &[hreflang] {
-                  &:after {
-                    background: $data-language-white-svg no-repeat right;
-                    background-size: 16px;
-                    padding-right: 16px;
-                    padding-left: 10px;
+          // secondary menu
+          &.list.links.secondaryMenu {
+            ul {
+              li {
+                a {
+                  color: $white;
+
+                  &[hreflang] {
+                    &:after {
+                      background: $data-language-white-svg no-repeat right;
+                      background-size: 16px;
+                      padding-right: 16px;
+                      padding-left: 10px;
+                    }
                   }
                 }
               }
             }
           }
-        }
-
-        // mega menu
-        &.megaMenu.navbar.navbar-light {
-          ul.menu.navbar-nav#megaMenu {
-            li.item.nav-item {
-              .headerItem {
-                a.nav-link {
-                  color: $white;
-                }
 
-                &.active {
+          // mega menu
+          &.megaMenu.navbar.navbar-light {
+            ul.menu.navbar-nav#megaMenu {
+              li.item.nav-item {
+                .headerItem {
                   a.nav-link {
-                    @media (min-width: 992px) {
-                      border-bottom: $halfSpacing solid $white;
+                    color: $white;
+                  }
+
+                  &.active {
+                    a.nav-link {
+                      @media (min-width: 992px) {
+                        border-bottom: $halfSpacing solid $white;
+                      }
                     }
                   }
                 }
               }
             }
           }
-        }
 
-        // search
-        &.search {
-          top: -21px;
-
-          .SearchWidget,
-          .searchWidget {
-            .SearchInputBar,
-            .searchInputBar {
-              form {
-                &.SearchInputForm,
-                &.searchInputForm {
-                  .InfernoFormlib-AutoCompleteField,
-                  .searchAutoCompleteField {
-                    .input-group {
-                      #search__Field,
-                      .searchTextField {
-                        background-color: $lightGrey !important;
-                        margin-right: 0;
-                        box-shadow: none;
-                        font-size: 1rem;
-                        border: 1px solid $grey;
+          // search
+          &.search {
+            top: -21px;
+
+            .SearchWidget,
+            .searchWidget {
+              .SearchInputBar,
+              .searchInputBar {
+                form {
+                  &.SearchInputForm,
+                  &.searchInputForm {
+                    .InfernoFormlib-AutoCompleteField,
+                    .searchAutoCompleteField {
+                      .input-group {
+                        #search__Field,
+                        .searchTextField {
+                          background-color: $lightGrey !important;
+                          margin-right: 0;
+                          box-shadow: none;
+                          font-size: 1rem;
+                          border: 1px solid $grey;
+                        }
                       }
-                    }
 
-                    .card {
-                      &:hover {
-                        background-color: $grey !important;
-                        color: $white;
+                      .card {
+                        &:hover {
+                          background-color: $grey !important;
+                          color: $white;
+                        }
                       }
-                    }
 
-                    .InfernoFormlib-AutocompleteItem,
-                    .searchAutocompleteItem {
-                      &.InfernoFormlib-AutocompleteItem--Highlight,
-                      &.searchAutocompleteItem--Highlight {
-                        background-color: $grey !important;
-                        border-top: 1px solid $white;
+                      .InfernoFormlib-AutocompleteItem,
+                      .searchAutocompleteItem {
+                        &.InfernoFormlib-AutocompleteItem--Highlight,
+                        &.searchAutocompleteItem--Highlight {
+                          background-color: $grey !important;
+                          border-top: 1px solid $white;
+                        }
                       }
-                    }
-
-                    .InfernoFormlib-AutosuggestItem--Highlight,
-                    .searchAutosuggestItem--Highlight {
-                      background-color: $grey !important;
 
-                      &:hover {
+                      .InfernoFormlib-AutosuggestItem--Highlight,
+                      .searchAutosuggestItem--Highlight {
                         background-color: $grey !important;
-                      }
-                    }
 
-                    .InfernoFormlib-AutocompleteItem,
-                    .searchAutocompleteItem {
-                      &:hover {
-                        background-color: $grey !important;
+                        &:hover {
+                          background-color: $grey !important;
+                        }
                       }
-                    }
 
-                    .InfernoFormlib-AutosuggestShowMore--Highlight,
-                    .searchAutosuggestShowMore--Highlight {
-                      background-color: $grey !important;
-                    }
+                      .InfernoFormlib-AutocompleteItem,
+                      .searchAutocompleteItem {
+                        &:hover {
+                          background-color: $grey !important;
+                        }
+                      }
 
-                    .InfernoFormlib-AutosuggestShowMore,
-                    .searchAutosuggestShowMore {
-                      &:hover {
+                      .InfernoFormlib-AutosuggestShowMore--Highlight,
+                      .searchAutosuggestShowMore--Highlight {
                         background-color: $grey !important;
+                      }
 
-                        a {
-                          color: $white !important;
+                      .InfernoFormlib-AutosuggestShowMore,
+                      .searchAutosuggestShowMore {
+                        &:hover {
+                          background-color: $grey !important;
+
+                          a {
+                            color: $white !important;
+                          }
                         }
                       }
-                    }
 
-                    label {
-                      color: $white;
-                      cursor: pointer;
-                    }
+                      label {
+                        color: $white;
+                        cursor: pointer;
+                      }
 
-                    .input-group[class^='input-group'] {
-                      .input-group-append {
-                        .btn {
-                          &.btn-primary {
-                            &.search-widget-button {
-                              background-color: $white !important;
-                              color: $black !important;
-                              border: 1px solid $grey !important;
+                      .input-group[class^='input-group'] {
+                        .input-group-append {
+                          .btn {
+                            &.btn-primary {
+                              &.search-widget-button {
+                                background-color: $white !important;
+                                color: $black !important;
+                                border: 1px solid $grey !important;
+                              }
                             }
                           }
                         }
@@ -198,106 +200,106 @@
         }
       }
     }
-  }
 
-  // site name
-  .block.siteName {
-    font-size: 1.5rem;
-    font-weight: 600;
-    margin-top: 0;
-    margin-bottom: 0;
-    left: 0;
-    bottom: 0;
-    height: auto;
-    max-width: calc(100% - 136px);
-    line-height: 1;
-    top: -4px;
-    position: relative;
-
-    @media (min-width: 768px) {
-      min-height: 60px;
-      font-size: 1.875rem;
-    }
-
-    a {
-      color: $white;
+    // site name
+    .block.siteName {
+      font-size: 1.5rem;
+      font-weight: 600;
+      margin-top: 0;
+      margin-bottom: 0;
+      left: 0;
+      bottom: 0;
+      height: auto;
+      max-width: calc(100% - 136px);
+      line-height: 1;
+      top: -4px;
+      position: relative;
 
-      &:hover {
-        color: $white;
-        cursor: pointer;
+      @media (min-width: 768px) {
+        min-height: 60px;
+        font-size: 1.875rem;
       }
 
-      &:active {
+      a {
         color: $white;
-      }
 
-      &:visited {
-        color: $white;
+        &:hover {
+          color: $white;
+          cursor: pointer;
+        }
+
+        &:active {
+          color: $white;
+        }
+
+        &:visited {
+          color: $white;
+        }
       }
     }
   }
-}
 
-.footer-intra {
-  &.container {
-    background-color: $white;
-    border-top: 3px solid $grey;
+  .footer-intra {
+    &.container {
+      background-color: $white;
+      border-top: 3px solid $grey;
 
-    @media (min-width: 992px) {
-      border-top: 6px solid $grey;
-    }
+      @media (min-width: 992px) {
+        border-top: 6px solid $grey;
+      }
 
-    .block {
-      &.columnSplitter {
-        &.row {
-          .col {
-            .block {
-              &.list {
-                &.links {
-                  h2 {
-                    color: $black;
-                  }
+      .block {
+        &.columnSplitter {
+          &.row {
+            .col {
+              .block {
+                &.list {
+                  &.links {
+                    h2 {
+                      color: $black;
+                    }
 
-                  ul {
-                    li {
-                      a {
-                        color: $black;
-                        font-weight: 400;
+                    ul {
+                      li {
+                        a {
+                          color: $black;
+                          font-weight: 400;
+                        }
                       }
                     }
                   }
                 }
-              }
-
-              &.teaser {
-                .teaserBody {
-                  h2 {
-                    color: $black;
-                  }
 
-                  .lead {
-                    color: $black;
-                    font-weight: 400;
+                &.teaser {
+                  .teaserBody {
+                    h2 {
+                      color: $black;
+                    }
 
-                    p {
+                    .lead {
                       color: $black;
                       font-weight: 400;
+
+                      p {
+                        color: $black;
+                        font-weight: 400;
+                      }
                     }
                   }
                 }
               }
             }
-          }
 
-          .block {
-            &.list {
-              .container {
-                .row {
-                  a {
-                    &.block {
-                      &.link {
-                        color: $black;
-                        font-weight: 400;
+            .block {
+              &.list {
+                .container {
+                  .row {
+                    a {
+                      &.block {
+                        &.link {
+                          color: $black;
+                          font-weight: 400;
+                        }
                       }
                     }
                   }
@@ -306,13 +308,13 @@
             }
           }
         }
-      }
 
-      @media (min-width: 768px) {
-        &.columnSplitter.row.using3Columns .col {
-          flex-basis: 33.333%;
-          flex-grow: 0;
-          max-width: 33.333%;
+        @media (min-width: 768px) {
+          &.columnSplitter.row.using3Columns .col {
+            flex-basis: 33.333%;
+            flex-grow: 0;
+            max-width: 33.333%;
+          }
         }
       }
     }
diff --git a/public/sass/custom/typography.scss b/public/sass/custom/typography.scss
index 2548fb2..70d86eb 100644
--- a/public/sass/custom/typography.scss
+++ b/public/sass/custom/typography.scss
@@ -1,32 +1,34 @@
-.pageTitle {
-  margin: 20px 0 0 0;
-  h1 {
-    margin-bottom: 0;
-  }
-  h1 + div,
-  h1 + h4 {
-    font-size: 1.25rem;
-    font-weight: 600;
-    margin-bottom: 44px;
-    margin-top: 4px;
+@layer kth-style.old {
+  .pageTitle {
+    margin: 20px 0 0 0;
+    h1 {
+      margin-bottom: 0;
+    }
+    h1 + div,
+    h1 + h4 {
+      font-size: 1.25rem;
+      font-weight: 600;
+      margin-bottom: 44px;
+      margin-top: 4px;
+    }
   }
-}
 
-h1 {
-  &#page-heading {
-    margin-bottom: 0;
+  h1 {
+    &#page-heading {
+      margin-bottom: 0;
+    }
   }
-}
 
-p {
-  &#page-sub-heading {
-    font-weight: 600;
-    line-height: 1.375;
-    margin-bottom: 14px;
-    margin-top: 0.325rem;
+  p {
+    &#page-sub-heading {
+      font-weight: 600;
+      line-height: 1.375;
+      margin-bottom: 14px;
+      margin-top: 0.325rem;
 
-    @media (max-width: 767.98px) {
-      font-size: 1rem;
+      @media (max-width: 767.98px) {
+        font-size: 1rem;
+      }
     }
   }
 }