Use em for controls

sass/components/media.sass

@@ -11,17 +11,17 @@
   font-size: $size-medium
   height: 32px
   line-height: 24px
-  margin-right: 10px
+  margin-right: 1rem
   min-width: 32px
   padding: 4px 8px
   text-align: center
   vertical-align: top
 
 .media-left
-  margin-right: 10px
+  margin-right: 1rem
 
 .media-right
-  margin-left: 10px
+  margin-left: 1rem
 
 .media-content
   flex-grow: 1
@@ -33,29 +33,29 @@
   display: flex
   text-align: left
   .content:not(:last-child)
-    margin-bottom: 10px
+    margin-bottom: 1rem
   .media
     border-top: 1px solid rgba($border, 0.5)
     display: flex
     padding-top: 10px
     .content:not(:last-child),
     .control:not(:last-child)
-      margin-bottom: 5px
+      margin-bottom: 0.5rem
     .media
-      padding-top: 5px
+      padding-top: 0.5rem
       & + .media
-        margin-top: 5px
+        margin-top: 0.5rem
   & + .media
     border-top: 1px solid rgba($border, 0.5)
-    margin-top: 10px
-    padding-top: 10px
+    margin-top: 1rem
+    padding-top: 1rem
   // Sizes
   &.is-large
     & + .media
-      margin-top: 20px
-      padding-top: 20px
+      margin-top: 1.4rem
+      padding-top: 1.4rem
   // Responsiveness
   +tablet
     &.is-large
       .media-number
-        margin-right: 20px
+        margin-right: 1.4rem

sass/components/message.sass

@@ -1,7 +1,7 @@
 .message-body
   border: 1px solid $border
   border-radius: $radius
-  padding: 12px 15px
+  padding: 0.8rem 1rem
   strong
     color: inherit
 
@@ -9,7 +9,7 @@
   background-color: $text
   border-radius: $radius $radius 0 0
   color: $text-invert
-  padding: 7px 10px
+  padding: 0.4rem 0.8rem
   strong
     color: inherit
   & + .message-body