Add preliminary styles for mobile devices

assets/scss/globals.scss

@@ -1,3 +1,9 @@
+@import 'include-media/dist/_include-media';
+
+// Breakpoints
+$breakpoints: (small: 320px, medium: 768px, large: 1024px);
+
+// Sizing
 $unit: 8px;
 
 // Colors

src/components/App/index.scss

@@ -41,6 +41,12 @@ h1 {
     margin-top: $unit * 3;
 }
 
+@include media('>small', '<=medium') {
+    body {
+        font-size: 1.6rem;
+    }
+}
+
 // #NotFound {
 //     display: flex;
 //     flex-direction: column;

src/components/Button/index.scss

@@ -87,3 +87,9 @@ button {
         color: inherit;
     }
 }
+
+@include media('>small', '<=medium') {
+    .Button {
+        font-size: 1.6rem;
+    }
+}

src/components/Segment/index.scss

@@ -34,3 +34,10 @@
         }
     }
 }
+
+@include media('>small', '<=medium') {
+  .Segment {
+      flex-grow: 1;
+      font-size: 1.6rem;
+  }
+}

src/components/SegmentedControl/index.scss

@@ -13,4 +13,14 @@
     overflow: hidden;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     z-index: 1;
+}
+
+@include media('>small', '<=medium') {
+    .SegmentedControlWrapper {
+        justify-content: stretch;
+    }
+    
+    .SegmentedControl {
+        width: 100%;
+    }
 }