feat(mobile): Adds missing visuals

sass/css/_layout.scss

@@ -1,12 +1,70 @@
+.hero + main {
+  margin-top: -50px;
+}
+
 .hero {
-  height: 230px;
+  height: 330px;
-  background: none;
+  background: url("../images/hero-phone@2x.png") repeat-x top center;
+  -webkit-background-size: contain;
+  -moz-background-size: contain;
+  -o-background-size: contain;
+  background-size: contain;
+
+  h1 {
+    color: #fff;
+    margin-bottom: 30px;
+  }
 }
 .hero2, .hero3 {
   //height: 130px;
-  background: none;
+  //background: none;
 }
 
+.hero2 {
+  height: 230px;
+  background: url("../images/hero2-phone@2x.png") no-repeat top center;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+}
+
+.hero5 {
+  height: 230px;
+  background: url("../images/hero3-phone@2x.png") no-repeat top center;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+}
+
+.hero6 {
+  height: 230px;
+  background: url("../images/hero2-phone@2x.png") no-repeat top center;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+}
+
+
+.card-artiq {
+  background: #fff url("../images/artiq-phone@2x.png") no-repeat top center;
+  background-size: contain;
+}
+.card-artiq > div {
+  padding-top: 66.64%;
+}
+
+.card-gateware {
+  background: #fff url("../images/gateware-phone@2x.png") no-repeat top center;
+  background-size: contain;
+}
+.card-gateware > div {
+  padding-top: 81.64%;
+}
+
+
 .card h5,
 h5 {
   color: $brand-color;
@@ -47,6 +105,13 @@ p ~ h5 {
 // Small devices (landscape phones, 576px and up)
 @media (min-width: 576px) {
 
+  .card-artiq > div {
+    padding-top: 0;
+  }
+
+  .card-gateware > div {
+    padding-top: 0;
+  }
 }
 
 // Medium devices (tablets, 768px and up)