diff --git a/src/assets/styles/fonts.scss b/src/assets/styles/fonts.scss
new file mode 100644
index 0000000..ce131d1
--- /dev/null
+++ b/src/assets/styles/fonts.scss
@@ -0,0 +1,49 @@
+@font-face {
+	font-family: 'cstd';
+	src: url('./fonts/DwMbyrnCMiZMVFXBZkwz.eot'); /* IE9 Compat Modes */
+	src:
+		url('./fonts/DwMbyrnCMiZMVFXBZkwz.eot?#iefix') format('embedded-opentype'),
+		/* IE6-IE8 */ url('./fonts/DwMbyrnCMiZMVFXBZkwz.woff') format('woff'),
+		/* Modern Browsers */ url('./fonts/DwMbyrnCMiZMVFXBZkwz.ttf') format('truetype'),
+		/* Safari, Android, iOS */
+			url('./fonts/DwMbyrnCMiZMVFXBZkwz.svg#dd452d63ae05ddb466f19713a7d09fd5') format('svg'); /* Legacy iOS */
+
+	font-style: normal;
+	font-weight: 400;
+}
+
+@font-face {
+	font-family: 'cstd';
+	src: url('./fonts/xFErEAWaEHlAopmQYjAg.eot'); /* IE9 Compat Modes */
+	src:
+		url('./fonts/xFErEAWaEHlAopmQYjAg.eot?#iefix') format('embedded-opentype'),
+		/* IE6-IE8 */ url('./fonts/xFErEAWaEHlAopmQYjAg.woff') format('woff'),
+		/* Modern Browsers */ url('./fonts/xFErEAWaEHlAopmQYjAg.ttf') format('truetype'),
+		/* Safari, Android, iOS */
+			url('./fonts/xFErEAWaEHlAopmQYjAg.svg#a81919819e5d11fb78ee7eadc8883b0d') format('svg'); /* Legacy iOS */
+
+	font-style: normal;
+	font-weight: 500;
+}
+
+// This doesn't work for some reason:
+
+// $font-path: './fonts/';
+// $font-family: 'cstd';
+
+// @mixin font-face($file-name, $font-weight) {
+// 	@font-face {
+// 		font-family: quote($font-family);
+// 		src: url('#{$font-path}#{$file-name}.eot');
+// 		src:
+// 			url('#{$font-path}#{$file-name}.eot?#iefix') format('embedded-opentype'),
+// 			url('#{$font-path}#{$file-name}.woff') format('woff'),
+// 			url('#{$font-path}#{$file-name}.ttf') format('truetype'),
+// 			url('#{$font-path}#{$file-name}.svg##{unique-id()}') format('svg');
+// 		font-style: normal;
+// 		font-weight: $font-weight;
+// 	}
+// }
+
+// @include font-face('DwMbyrnCMiZMVFXBZkwz', 400);
+// @include font-face('xFErEAWaEHlAopmQYjAg', 500);
diff --git a/src/assets/styles/globals.scss b/src/assets/styles/globals.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/styles/mixins.scss b/src/assets/styles/mixins.scss
similarity index 86%
rename from src/lib/styles/mixins.scss
rename to src/assets/styles/mixins.scss
index ab85738..97d7d2d 100644
--- a/src/lib/styles/mixins.scss
+++ b/src/assets/styles/mixins.scss
@@ -1,5 +1,8 @@
 // use with @include
 @mixin breakpoint($breakpoint) {
+	$small-phone-width: 395px;
+	$small-phone-height: 1280px;
+
 	$phone-width: 450px;
 	$phone-height: 1280px;
 
@@ -38,6 +41,16 @@
         @content;
        }
 	}
+
+	@if $breakpoint == small-phone {
+		// prettier-ignore
+		@media only screen 
+       and (max-width: $small-phone-width) 
+       and (max-height: $small-phone-height) 
+       and (-webkit-min-device-pixel-ratio: 2) {
+        @content;
+       }
+	}
 }
 
 @mixin hidpiImage($image, $extension, $width, $height, $position: center, $repeat: no-repeat) {
diff --git a/src/lib/styles/reset.css b/src/assets/styles/reset.css
similarity index 100%
rename from src/lib/styles/reset.css
rename to src/assets/styles/reset.css
diff --git a/src/lib/styles/themes.scss b/src/assets/styles/themes.scss
similarity index 100%
rename from src/lib/styles/themes.scss
rename to src/assets/styles/themes.scss
diff --git a/src/lib/styles/variables.scss b/src/assets/styles/variables.scss
similarity index 94%
rename from src/lib/styles/variables.scss
rename to src/assets/styles/variables.scss
index b8908c9..0395d08 100644
--- a/src/lib/styles/variables.scss
+++ b/src/assets/styles/variables.scss
@@ -31,9 +31,9 @@ $page-top-margin: $unit-6x;
 $page-vert-padding: $unit-6x;
 $page-horz-padding: $unit-5x;
 
-$page-fourth: ($page-width - $margin * 5) / 4;
-$page-third: ($page-width - $margin * 5) / 3;
-$page-half: ($page-fourth * 2) + $margin;
+$page-fourth: calc(($page-width - $margin * 5) / 4);
+$page-third: calc(($page-width - $margin * 5) / 3);
+$page-half: calc(($page-fourth * 2) + $margin);
 
 $card-height: $unit-14x;
 $mention-padding: $unit-3x;
diff --git a/src/lib/styles/fonts.css b/src/lib/styles/fonts.css
deleted file mode 100644
index 8fb9f8a..0000000
--- a/src/lib/styles/fonts.css
+++ /dev/null
@@ -1,27 +0,0 @@
-@font-face {
-	font-family: 'cstd';
-	src: url('../fonts/DwMbyrnCMiZMVFXBZkwz.eot'); /* IE9 Compat Modes */
-	src:
-		url('../fonts/DwMbyrnCMiZMVFXBZkwz.eot?#iefix') format('embedded-opentype'),
-		/* IE6-IE8 */ url('../fonts/DwMbyrnCMiZMVFXBZkwz.woff') format('woff'),
-		/* Modern Browsers */ url('../fonts/DwMbyrnCMiZMVFXBZkwz.ttf') format('truetype'),
-		/* Safari, Android, iOS */
-			url('../fonts/DwMbyrnCMiZMVFXBZkwz.svg#dd452d63ae05ddb466f19713a7d09fd5') format('svg'); /* Legacy iOS */
-
-	font-style: normal;
-	font-weight: 400;
-}
-
-@font-face {
-	font-family: 'cstd';
-	src: url('../fonts/xFErEAWaEHlAopmQYjAg.eot'); /* IE9 Compat Modes */
-	src:
-		url('../fonts/xFErEAWaEHlAopmQYjAg.eot?#iefix') format('embedded-opentype'),
-		/* IE6-IE8 */ url('../fonts/xFErEAWaEHlAopmQYjAg.woff') format('woff'),
-		/* Modern Browsers */ url('../fonts/xFErEAWaEHlAopmQYjAg.ttf') format('truetype'),
-		/* Safari, Android, iOS */
-			url('../fonts/xFErEAWaEHlAopmQYjAg.svg#a81919819e5d11fb78ee7eadc8883b0d') format('svg'); /* Legacy iOS */
-
-	font-style: normal;
-	font-weight: 500;
-}
diff --git a/src/lib/styles/globals.scss b/src/lib/styles/globals.scss
deleted file mode 100644
index 57bda9b..0000000
--- a/src/lib/styles/globals.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import 'variables.scss';
-@import 'themes.scss';