fix: optimize CSS

components/Intro.vue

@@ -0,0 +1,35 @@
+<template>
+  <section id="intro" class="Intro content full default-gap">
+    <div class="intro-text flex-col default-gap">
+      <h2 class="flex-col">
+        <span class="greeting">Moin.</span>
+        <span class="my-name-wrapper">Ich bin <span class="highlight">Fiona</span>.</span>
+      </h2>
+      <h3>
+        Component <span class="highlight">&</span> API Entwicklerin
+      </h3>
+      <p class="fulltext">
+        Ich helfe Unternehmen dabei, ihre Daten so richtig nice aufzubereiten
+        und in wunderschöne Komponenten zu gießen.
+      </p>
+      <p class="fulltext">
+        Mit über 20 Jahren Erfahrung in der Webentwicklung habe ich
+        inzwischen so ziemlich jeden Stuff miterlebt.
+      </p>
+      <p class="fulltext">
+        Du brauchst großartige Komponenten und saubere Schnittstellen?
+      </p>
+      <Button href="#services" class="cta" label="Lass mal reden" />
+    </div>
+    <div class="intro-img">
+      <picture>
+        <source width="750" height="866" media="(min-width: 431px)" srcset="/img/profile_big.webp" />
+        <img width="430" height="866" src="/img/profile_small.webp" alt="Bild von mir" />
+      </picture>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+
+</script>