Fix about section

src/components/molecules/PageTitle.svelte

@@ -31,6 +31,8 @@
 </div>
 
 <style lang="scss">
+  @import "$lib/styles/mixins.scss";
+  
   @layer component {
     .page-title {
       display: flex;
@@ -49,6 +51,10 @@
       text-shadow: 0px 0px 0.5em var(--color-primary);
       user-select: none;
 
+      @include portrait {
+        font-size: 1.8em;
+      }
+
       h1,
       h6 {
         width: 100%;

src/components/organisms/Introduction.svelte

@@ -1,15 +1,12 @@
 <script>
-
   import Box from "../atoms/Box.svelte";
-    import ContainerDualColumn from "../atoms/ContainerDualColumn.svelte";
-    import Paragraph from "../atoms/Paragraph.svelte";
   import Thumbnail from "../molecules/Thumbnail.svelte";
-
 </script>
+
 <Box title="About">
-  <ContainerDualColumn leftRatio="1" rightRatio="2">
+  <div class="about-content">
+    <div class="about-image">
       <Thumbnail
-      slot="left"
         imageData={{
           altText:
             "A picture of Ferris, the Rust mascot. An orange crab plushie.",
@@ -22,12 +19,44 @@
           ],
         }}
       />
-    <Paragraph slot="right">
+    </div>
+    <p>
       Heyyy. I'm a software developer and tinkerer from Germany. I do a lot of
       stuff so this website is an attempt in providing an overview.
       <br /><br />
       Right now it's very much a work in progress as I'm figuring out how to properly
       design a website (lol). But there's already some content to explore.
-    </Paragraph>
+    </p>
-  </ContainerDualColumn>
+  </div>
 </Box>
+
+<style lang="scss">
+  @import "$lib/styles/mixins.scss";
+
+  @layer component {
+    .about-content {
+      display: block;
+
+      @include portrait {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .about-image {
+        margin-right: 1em;
+        float: left;
+        width: 30%;
+
+        @include portrait {
+          width: 100%;
+          margin-right: 0;
+          margin-bottom: 1em;
+        }
+      }
+
+      p {
+        margin: 0;
+      }
+    }
+  }
+</style>