Fix 'Getting Started' images on mobile (#56)

Author: GovernmentPlates

_layouts/getting_started.html

@@ -15,7 +15,7 @@ <h1>Getting started with Indico</h1>
                 <div class="col-lg-6 col-12">
                     <a class="option-card" href="https://docs.getindico.io/en/stable/installation/">
                         <div class="row justify-content-center">
-                            <div class="col-3">
+                            <div class="col-3 xs-hidden">
                                 <img src="{{ '/img/install.png' | relative_url }}">
                             </div>
                             <div class="col-9">
@@ -28,7 +28,7 @@ <h4>Install Indico</h4>
                 <div class="col-lg-6 col-12">
                     <a class="option-card" href="https://sandbox.getindico.io">
                         <div class="row justify-content-center">
-                            <div class="col-3">
+                            <div class="col-3 xs-hidden">
                                 <img src="{{ '/img/sandbox.png' | relative_url }}">
                             </div>
                             <div class="col-9">

_sass/indico.scss

@@ -40,6 +40,7 @@ $blue-gradient:    linear-gradient(to right, #0054B5, #3DD8FF);
 $on-palm:          600px;
 $on-laptop:        800px;
 
+$xs:               360px;
 $sm:               576px;
 $md:               768px;
 $lg:               992px;
@@ -1128,6 +1129,30 @@ a.no-decoration {
         margin: 40px 10px;
     }
 
+    @media(max-width: $sm) {
+        .option-card {
+            img {
+                width: auto;
+                height: auto;
+            }
+
+            h4 {
+                font-size: 23px;
+            }
+        }
+    }
+
+    @media(max-width: $xs) {
+        .option-card {
+            h4 {
+                font-size: 18px;
+            }
+
+            p {
+                font-size: 15px;
+            }
+        }
+    }
  }
 
 
@@ -1481,3 +1506,9 @@ a.no-decoration {
         border-radius: 18px;
     }
 }
+
+@media (max-width: $xs) {
+    .xs-hidden {
+        display: none !important;
+    }
+}