diff --git a/files/nutshell/scss/base/_grid.scss b/files/nutshell/scss/base/_grid.scss
index c27ae04..0e72c7c 100644
--- a/files/nutshell/scss/base/_grid.scss
+++ b/files/nutshell/scss/base/_grid.scss
@@ -3,7 +3,7 @@
 // * BASE Contao Framework
 // * erdmann-freunde.de/nutshell/
 // *
-// * Lizenziert unter MIT OPEN SOURCE 
+// * Lizenziert unter MIT OPEN SOURCE
 // *
 
 //
@@ -30,14 +30,14 @@ $grid__columns:         12 !default;
   grid-template-columns: repeat(var(--grid__columns), 1fr);
   grid-column-gap: var(--grid__gutter);
   grid-auto-columns: 1fr;
-  
+
   @supports not (display: grid) {
     display: flex;
     flex-wrap: wrap;
     margin-left: calc(-1 * var(--grid__gutter) / 2);
     margin-right: calc(-1 * var(--grid__gutter) / 2);
   }
-  
+
   .ie & {
     display: flex;
     flex-wrap: wrap;
@@ -49,83 +49,97 @@ $grid__columns:         12 !default;
 // column default floating
 %column-floating {
   grid-column: 1 / -1;
-  
+
   @supports not(display: grid) {
     padding-left: var(--grid__gutter--half);
     padding-right: var(--grid__gutter--half);
   }
-  
+
   .ie & {
     padding-left: var(--grid__gutter--half);
     padding-right: var(--grid__gutter--half);
   }
 }
 
+@for $i from 1 through $grid__columns { // [3][4]
+  .col-#{$i} { // [2][3]
+    grid-column: span $i / span $i;
+
+    @supports not (display: grid) {
+      width: percentage($i/$grid__columns);
+    }
+
+    .ie & {
+      width: percentage($i/$grid__columns);
+    }
+  }
+}
+
 // [1] length($breakpoints) - go through length of available viewports (xs, sm, md, lg, xl == 5)
 // [2] $current - actual viewport (e.g. "xs")
 // [3] $i - counter, returns the actual grid-column
 // [4] var(--grid__columns) - go through available columns (e.g. 1 --> 12)
 
 // [5] override clear- class for the next viewport by default
-// this means, you can add a clear-xs class to an element, but the clear will only affect the current viewport.  
+// this means, you can add a clear-xs class to an element, but the clear will only affect the current viewport.
 @for $size from 1 through length($breakpoints) { // [1]
   $x:   nth($breakpoints, $size); // [2]
   $current:   nth($x, 1); // [2]
-  
+
   // column creation
   @for $i from 1 through $grid__columns { // [3][4]
     .col-#{$current}-#{$i} { // [2][3]
       @extend %column-floating;
     }
   }
-  
+
   // width creation for every col- class
   @include media-query(screen-#{$current}) { // [2]
 
-  	@for $i from 1 through $grid__columns { // [3][4]
-  		.col-#{$current}-#{$i} { // [2][3]
-  			grid-column: span $i / span $i;
-  			
-  			@supports not (display: grid) {
+    @for $i from 1 through $grid__columns { // [3][4]
+      .col-#{$current}-#{$i} { // [2][3]
+        grid-column: span $i / span $i;
+
+        @supports not (display: grid) {
           width: percentage($i/$grid__columns);
         }
-        
+
         .ie & {
           width: percentage($i/$grid__columns);
         }
-  		}
-  	}
+      }
+    }
   }
-  
+
   // height creation for every row-span- class
   @include media-query(screen-#{$current}) { // [2]
 
-  	@for $i from 1 through $grid__columns { // [3][4]
-  		.row-span-#{$current}-#{$i} { // [2][3]
-  			grid-row: span $i / span $i;
-  		}
-  	}
+    @for $i from 1 through $grid__columns { // [3][4]
+      .row-span-#{$current}-#{$i} { // [2][3]
+        grid-row: span $i / span $i;
+      }
+    }
   }
-  
+
   // .col-start and .row-start creation
   @include media-query(screen-#{$current}) { // [2]
-  
-  	@for $i from 1 through $grid__columns { // [3]
-  		.col-start-#{$current}-#{$i} { // [2][3]
-  			grid-column-start: $i;
-  		}
-  		.row-start-#{$current}-#{$i} { // [2][3]
-  			grid-row-start: $i;
-  		}
-  	}
+
+    @for $i from 1 through $grid__columns { // [3]
+      .col-start-#{$current}-#{$i} { // [2][3]
+        grid-column-start: $i;
+      }
+      .row-start-#{$current}-#{$i} { // [2][3]
+        grid-row-start: $i;
+      }
+    }
   }
-  
+
   //pull-left & -right creation
   @include media-query(screen-#{$current}) { // [2]
     .pull-right-#{$current} { // [2]
       grid-column-end: -1;
     }
-    
+
     .pull-left-#{$current} { // [2]
       grid-row-start: 1;
       grid-column-end: inherit;
@@ -214,10 +228,10 @@ $grid__columns:         12 !default;
 // row-span-1-12
 @for $i from 1 through $grid__columns { // [1]
   .row-start-#{$i} { // [2][3]
-			grid-row-start: $i;
+      grid-row-start: $i;
   }
-  
+
   .row-span-#{$i} { // [2][3]
-			grid-row: span $i / span $i;
+      grid-row: span $i / span $i;
   }
 }
diff --git a/files/nutshell/scss/base/_page.scss b/files/nutshell/scss/base/_page.scss
index f591fba..cd20ee5 100644
--- a/files/nutshell/scss/base/_page.scss
+++ b/files/nutshell/scss/base/_page.scss
@@ -3,7 +3,7 @@
 // * BASE Contao Framework
 // * erdmann-freunde.de/nutshell/
 // *
-// * Lizenziert unter MIT OPEN SOURCE 
+// * Lizenziert unter MIT OPEN SOURCE
 // *
 
 //
@@ -28,7 +28,7 @@
 //     render text using sub-pixel anti-aliasing.
 html {
   font-family: var(--base-font-family, sans-serif);
-  font-size: var(--base-font-size); // [1]
+  font-size: var(--base-font-size--xs); // [1]
   line-height: var(--base-line-height); //[1]
   font-weight: var(--base-font-weight);
   background-color: var(--color-page-background);
@@ -39,13 +39,20 @@ html {
   -ms-text-size-adjust: 100%; // [4]
   -moz-osx-font-smoothing: grayscale; // [5]
   -webkit-font-smoothing: antialiased; // [6]
-  
-  @include media-query(screen-xs-max) {
-    font-size: var(--base-font-size--xs); 
+
+  @include media-query(screen-sm) {
+    font-size: var(--base-font-size--sm, var(--base-font-size));
+  }
+
+  @include media-query(screen-md) {
+    font-size: var(--base-font-size);
   }
-  
+
+  @include media-query(screen-lg) {
+    font-size: var(--base-font-size--lg, var(--base-font-size));
+  }
+
   @include media-query(screen-xl) {
-    //font-size: calc(var(--base-font-size--xl) / 1rem * 1em); 
     font-size: var(--base-font-size--xl);
   }
 }
diff --git a/files/nutshell/scss/components/_forms.scss b/files/nutshell/scss/components/_forms.scss
index 3ae9168..dd7de3b 100644
--- a/files/nutshell/scss/components/_forms.scss
+++ b/files/nutshell/scss/components/_forms.scss
@@ -67,7 +67,8 @@ textarea.textarea {
 }
 
 .widget-text,
-.widget-textarea {
+.widget-textarea,
+.widget-password {
   margin-bottom: var(--base-spacing-unit);
 }
 
diff --git a/files/nutshell/scss/components/_links.scss b/files/nutshell/scss/components/_links.scss
index 60808a3..b72ccc6 100644
--- a/files/nutshell/scss/components/_links.scss
+++ b/files/nutshell/scss/components/_links.scss
@@ -91,7 +91,7 @@ div.btn--primary,
   }
 }
 
-.div.btn--left {
+div.btn--left {
   text-align: left;
 }