diff --git a/src/pages/index.astro b/src/pages/index.astro
index f1069ec..f3c9416 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -4,77 +4,106 @@ import Layout from "../layouts/Layout.astro";
 
 <Layout title="Ondřej Nývlt">
   <main class="container">
-    <hgroup class="header">
-      <h1>
-        I’m <em>Ondřej Nývlt</em>,
-      </h1>
-      <p>
-        a designer, software engineer, and&nbsp;student of social & cultural anthtropology.
-      </p>
-    </hgroup>
+    <div class="section">
+      <hgroup class="header section__content">
+        <h1>
+          I’m <em>Ondřej Nývlt</em>,
+        </h1>
+        <p>
+          a designer, software engineer, and&nbsp;student of social & cultural anthtropology.
+        </p>
+      </hgroup>
+    </div>
 
-    <ul class="about par-space">
-      <li>I do mainly web development. While I do so, I try to stay as close to the web platform as possible,
-      without the hype and complexity of JavaScript tooling. Instead, I’m an advocate of <a class="link" href="https://hypermedia.systems/">hypermedia-driven applications</a>.
-      <li>I like a good typography and hate repetitive work. That’s why I experiment with computational typesetting and <a class="link" href="https://docs.racket-lang.org/pollen">Pollen</a> for my school theses.
-      <li>I contribute to open-source projects at <a class="link" href="https://nolog.cz">nolog.cz</a>, activist IT collective
-      which provides privacy-focused infrastructure to social movements (You should consider <a class="link" href="https://nolog.cz/support/">supporting them</a>).
-    </ul>
+    <section class="section">
+      <h2 class="section__header">About me</h2>
+      <ul class="section__content about par-space">
+        <li>I do mainly web development. While I do so, I try to stay as close to the web platform as possible,
+        without the hype and complexity of JavaScript tooling. Instead, I’m an advocate of <a class="link" href="https://hypermedia.systems/">hypermedia-driven applications</a>.
+        <li>I like a good typography and hate repetitive work. That’s why I experiment with computational typesetting and <a class="link" href="https://docs.racket-lang.org/pollen">Pollen</a> for my school theses.
+        <li>I contribute to open-source projects at <a class="link" href="https://nolog.cz">nolog.cz</a>, activist IT collective
+        which provides privacy-focused infrastructure to social movements (You should consider <a class="link" href="https://nolog.cz/support/">supporting them</a>).
+      </ul>
+    </section>
     
-    <nav class="nav par-space">
-      <h2>My software projects are to be found at</h2>
-      <ul>
-        <li><a class="link" href="https://github.com/onvlt">github</a> and
-        <li><a class="link" href="https://git.nolog.cz/uwundrej">git.nolog.cz</a>
-      </ul>.
+    <nav class="section par-space">
+      <h2 class="section__header">Work</h2>
+      <div class="section__content nav">
+        <p>My software projects are to be found at</p>
+        <ul>
+          <li><a class="link" href="https://github.com/onvlt">github</a> and
+          <li><a class="link" href="https://git.nolog.cz/uwundrej">git.nolog.cz</a>
+        </ul>.
+      </div>
     </nav>
 
-    <nav class="nav">
-      <h2>I’m at</h2>
-      <ul>
-        <li><a class="link" href="https://twitter.com/uwundrej">twitter</a>,
-        <li><a class="link" href="https://witter.cz/@uwundrej">mastodon</a> and
-        <li><a class="link" href="mailto:ondrej@nyv.lt">e-mail</a>
-      </ul>.
+    <nav class="section">
+      <h2 class="section__header">Contact</h2>
+      <div class="section__content nav">
+        <p>I’m at</p>
+        <ul>
+          <li><a class="link" href="https://twitter.com/uwundrej">twitter</a>,
+          <li><a class="link" href="https://witter.cz/@uwundrej">mastodon</a> and
+          <li><a class="link" href="mailto:ondrej@nyv.lt">e-mail</a>
+        </ul>.
+      </div>
     </nav>
   </main>
 </Layout>
 
 <style>
   .container {
-    max-width: 50rem;
+    max-width: 1200px;
     padding: 1rem;
     margin: 3rem auto;
     word-wrap: break-word;
   }
 
-  .header {
+  .section__header {
     font-weight: 700;
-    margin-bottom: 1.5rem;
+    margin-bottom: 0.5em;
   }
 
-  .header * {
+  @media screen and (min-width: 800px) {
+    .section {
+      display: grid;
+      grid-template-columns: repeat(12, 1fr);
+    }
+
+    .section__header {
+      grid-column: 1 / 3;
+      text-align: right;
+    }
+
+    .section__content {
+      grid-column: 4 / 12;
+    }
+  }
+
+  .header {
+    font-weight: 700;
+    margin-bottom: 3rem;
+    font-size: 2.25rem;
+    line-height: 1.3;
+  }
+
+  .header > * {
     display: inline;
   }
 
   .about li {
-    margin-bottom: 1.25em;
+    margin-bottom: 0.5em;
   }
 
-  .nav h2 {
-    display: inline;
-    margin-right: 0.75rem;
+  .nav p {
+    margin-right: 0.6rem;
   }
 
-  .nav ul {
-    display: inline;
-  }
-
-  .nav li {
+  .nav * {
     display: inline;
   }
 
   .par-space {
-    margin-bottom: 1.25em;
+    margin-bottom: 1em;
   }
 </style>
\ No newline at end of file