Fix media object

sass/components/card.sass

@@ -2,31 +2,30 @@
   align-items: stretch
   box-shadow: 0 1px 2px rgba($black, 0.1)
   display: flex
-  min-height: 40px
 
 .card-header-title
-  align-items: flex-start
+  align-items: center
   color: $text-strong
   display: flex
   flex-grow: 1
-  font-weight: bold
-  padding: 10px
+  font-weight: $weight-bold
+  padding: 0.75rem
 
 .card-header-icon
   align-items: center
   cursor: pointer
   display: flex
   justify-content: center
-  width: 40px
+  padding: 0.75rem
 
 .card-image
   display: block
   position: relative
 
 .card-content
-  padding: 20px
+  padding: 1.5rem
   .title + .subtitle
-    margin-top: -20px
+    margin-top: -1.5rem
 
 .card-footer
   border-top: 1px solid $border
@@ -37,8 +36,9 @@
   align-items: center
   display: flex
   flex-grow: 1
+  flex-shrink: 0
   justify-content: center
-  padding: 10px
+  padding: 0.75rem
   &:not(:last-child)
     border-right: 1px solid $border
 
@@ -48,11 +48,8 @@
   color: $text
   max-width: 100%
   position: relative
-  width: 300px
   .media:not(:last-child)
-    margin-bottom: 10px
+    margin-bottom: 0.75rem
   // Modifiers
-  &.is-fullwidth
-    width: 100%
   &.is-rounded
     border-radius: $radius-large

sass/components/level.sass

@@ -1,36 +1,40 @@
 .level-item
+  align-items: center
+  display: flex
+  justify-content: center
   .title,
   .subtitle
     margin-bottom: 0
   // Responsiveness
   +mobile
     &:not(:last-child)
-      margin-bottom: 10px
+      margin-bottom: 0.75rem
 
 .level-left,
 .level-right
   .level-item
     &:not(:last-child)
-      margin-right: 10px
+      margin-right: 0.75rem
     // Modifiers
     &.is-flexible
       flex-grow: 1
 
 .level-left
+  align-items: center
+  justify-content: flex-start
   // Responsiveness
   +mobile
     & + .level-right
-      margin-top: 20px
+      margin-top: 1.5rem
   +tablet
-    align-items: center
     display: flex
 
 .level-right
+  align-items: center
+  justify-content: flex-end
   // Responsiveness
   +tablet
-    align-items: center
     display: flex
-    justify-content: flex-end
 
 .level
   +block

sass/components/media.sass

@@ -1,27 +1,13 @@
-.media-number,
 .media-left,
 .media-right
   flex-grow: 0
   flex-shrink: 0
 
-.media-number
-  background-color: $background
-  border-radius: 290486px
-  display: inline-block
-  font-size: $size-medium
-  height: 32px
-  line-height: 24px
-  margin-right: 1rem
-  min-width: 32px
-  padding: 4px 8px
-  text-align: center
-  vertical-align: top
-
 .media-left
-  margin-right: 1rem
+  margin-right: 0.75rem
 
 .media-right
-  margin-left: 1rem
+  margin-left: 0.75rem
 
 .media-content
   flex-grow: 1
@@ -37,7 +23,7 @@
   .media
     border-top: 1px solid rgba($border, 0.5)
     display: flex
-    padding-top: 10px
+    padding-top: 0.75rem
     .content:not(:last-child),
     .control:not(:last-child)
       margin-bottom: 0.5rem
@@ -52,10 +38,5 @@
   // Sizes
   &.is-large
     & + .media
-      margin-top: 1.4rem
-      padding-top: 1.4rem
-  // Responsiveness
-  +tablet
-    &.is-large
-      .media-number
-        margin-right: 1.4rem
+      margin-top: 1.5rem
+      padding-top: 1.5rem

sass/elements/button.sass

@@ -89,7 +89,7 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
   &:focus,
   &.is-focused
     border-color: $button-focus-border
-    box-shadow: 0 0 0.5em rgba($button-focus-border, 0.5)
+    box-shadow: 0 0 0.5em rgba($button-focus-border, 0.25)
     color: $button-focus
   &:active,
   &.is-active
@@ -125,7 +125,7 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
       &:focus,
       &.is-focused
         border-color: transparent
-        box-shadow: 0 0 0.5em rgba($color, 0.5)
+        box-shadow: 0 0 0.5em rgba($color, 0.25)
         color: $color-invert
       &:active,
       &.is-active

sass/elements/other.sass

@@ -42,8 +42,15 @@
   +loader
 
 .number
+  align-items: center
   background-color: $background
   border-radius: 290486px
-  display: inline-block
+  display: inline-flex
   font-size: $size-medium
+  height: 2em
+  justify-content: center
+  margin-right: 1.5rem
+  min-width: 2.5em
+  padding: 0.25rem 0.5rem
+  text-align: center
   vertical-align: top

sass/elements/title.sass

@@ -48,7 +48,7 @@ $subtitle-weight:   $weight-light !default
   strong
     color: $subtitle-strong
   & + .title
-    margin-top: -1.4rem
+    margin-top: -1.5rem
   // Colors
   @each $size in $sizes
     $i: index($sizes, $size)