diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index baacfae..98cfc1a 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,13 +1,46 @@
 <script>
-  import FemtoHeader from "../components/FemtoHeader.svelte";
-  import Globe from "../components/Globe.svelte";
-  import IntroText from "../components/IntroText.svelte";
-  import TalkingPointContainer from "../components/TalkingPointContainer.svelte";
-  import TalkingPointContent from "../components/TalkingPointContent.svelte";
-  import TalkingPointName from "../components/TalkingPointName.svelte";
-  import PartnerContainer from "../components/PartnerContainer.svelte";
+  import FemtoHeader from '../components/FemtoHeader.svelte'
+  import Globe from '../components/Globe.svelte'
+  import IntroText from '../components/IntroText.svelte'
+  import TalkingPointContainer from '../components/TalkingPointContainer.svelte'
+  import TalkingPointContent from '../components/TalkingPointContent.svelte'
+  import TalkingPointName from '../components/TalkingPointName.svelte'
+  import PartnerContainer from '../components/PartnerContainer.svelte'
 </script>
 
+<style>
+  :global(.site a) {
+    color: #72bbd9;
+  }
+  .site {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 1024px;
+    padding-left: 1em;
+    padding-right: 1em;
+  }
+
+  .hero {
+    margin-top: 3em;
+    margin-bottom: 3em;
+    background-color: aqua;
+  }
+
+  .hero .container {
+    background-color: aquamarine;
+    display: grid;
+    grid-template-columns: 400px auto;
+    grid-template-rows: auto;
+  }
+
+  @media only screen and (max-device-width: 900px) and (orientation: portrait) {
+    .hero .container {
+      grid-template-columns: auto;
+      grid-template-rows: 400px auto;
+    }
+  }
+</style>
+
 <svelte:head>
   <title>FemtoStar</title>
 </svelte:head>
@@ -46,14 +79,15 @@
         down to the lowest level details. We couldn't violate your privacy even
         if we wanted to.
       </p>
-      <p><a rel="prefetch" href="./privacy-by-design">Learn more →</a></p>
+      <p>
+        <a rel="prefetch" href="./privacy-by-design">Learn more →</a>
+      </p>
     </TalkingPointContent>
   </TalkingPointContainer>
 
   <TalkingPointContainer>
     <TalkingPointName
-      text="Free and open-source technology, built by a global community"
-    />
+      text="Free and open-source technology, built by a global community" />
     <TalkingPointContent>
       <p>
         FemtoStar is free and open-source technology. This goes for software and
@@ -62,37 +96,11 @@
         your terminal lives up to its privacy and security claims, the source is
         freely available to use, read, or modify.
       </p>
-      <p><a rel="prefetch" href="./free-open-source">Learn more →</a></p>
+      <p>
+        <a rel="prefetch" href="./free-open-source">Learn more →</a>
+      </p>
     </TalkingPointContent>
   </TalkingPointContainer>
 
-  <PartnerContainer>
-    
-  </PartnerContainer>
+  <PartnerContainer />
 </div>
-
-<style>
-  :global(.site a) {
-    color: #72bbd9;
-  }
-  .site {
-    margin-left: auto;
-    margin-right: auto;
-    max-width: 1024px;
-    padding-left: 1em;
-    padding-right: 1em;
-  }
-
-  .hero {
-    margin-top: 3.0em;
-    margin-bottom: 3.0em;
-    background-color: aqua;
-  }
-
-  .hero .container {
-    background-color: aquamarine;
-    display: grid;
-    grid-template-columns: 400px auto;
-    grid-template-rows: auto;
-  }
-</style>