Better placement

docs/_sass/native.sass

@@ -1,14 +1,8 @@
 .native-js
   display: none
-  margin-left: auto
-  margin-right: auto
-  max-width: 760px
+  font-size: 1rem
   opacity: 0
   visibility: hidden
-  &:not(:first-child)
-    margin-top: 3rem
-  &:not(:last-child)
-    margin-bottom: 3rem
 
 .native-show
   display: block
@@ -18,8 +12,8 @@
 .native-flex
   align-items: center
   display: flex
-  justify-content: space-between
-  padding: 1.5rem
+  justify-content: center
+  padding: 2em
   text-decoration: none
 
 .native-img
@@ -35,12 +29,13 @@
 
 .native-main
   align-items: center
-  flex-grow: 1
+  flex-grow: 0
   flex-shrink: 1
+  max-width: 640px
 
 .native-company
   display: block
-  font-size: 10px
+  font-size: 0.625em
   letter-spacing: 2px
   margin-bottom: 4px
   text-transform: uppercase
@@ -55,7 +50,7 @@
   display: inline-block
   flex-grow: 0
   flex-shrink: 0
-  font-size: $size-small
+  font-size: 0.75em
   font-weight: $weight-normal
   padding: 0.75em 1em
   text-transform: uppercase
@@ -74,16 +69,21 @@ $native-bp: 600px
     display: block
     text-align: center
   .native-main
-    margin-bottom: 2rem
+    margin-bottom: 2em
   .native-details
-    margin: 1rem
+    margin: 1em
 
 +from($native-bp)
   .native-flex
     display: flex
+    padding: 4em
     text-align: left
   .native-main
     display: flex
-    margin-right: 2rem
+    margin-right: 2em
   .native-details
-    margin-left: 2rem
+    margin-left: 2em
+
++widescreen
+  .native-js
+    font-size: 1.25rem