diff --git a/.gitignore b/.gitignore
index b512c09..784c123 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,3 @@
-node_modules
\ No newline at end of file
+node_modules
+.astro/settings.json
+dist
\ No newline at end of file
diff --git a/package.json b/package.json
index e204f33..9d0770b 100644
--- a/package.json
+++ b/package.json
@@ -4,9 +4,9 @@
   "private": true,
   "scripts": {
     "dev": "astro dev --port 3000",
-    "start": "astro preview",
+    "start": "astro preview --port 3000",
     "build": "astro build",
-    "preview": "astro preview",
+    "preview": "astro preview --port 3000",
     "astro": "astro",
     "format:write": "prettier --write ./src",
     "format": "prettier --check ./src"
diff --git a/src/components/hero.astro b/src/components/hero.astro
index 682dcdc..2d237bb 100644
--- a/src/components/hero.astro
+++ b/src/components/hero.astro
@@ -53,7 +53,7 @@ import { Image } from "astro:assets";
       @apply flex flex-1 flex-col gap-4;
     }
 
-    .img {
+    img {
       @apply w-full rounded-lg;
     }
 
diff --git a/src/components/how-much/index.astro b/src/components/how-much/index.astro
index 32e487d..3278a8a 100644
--- a/src/components/how-much/index.astro
+++ b/src/components/how-much/index.astro
@@ -4,7 +4,6 @@ import compactImage from "@/assets/modes/compact.png";
 import collapsedImage from "@/assets/modes/collapsed.png";
 import standardImage from "@/assets/modes/standard.png";
 import splitImage from "@/assets/modes/split.png";
-import "./styles.css";
 
 type ModesOptions = "compact" | "collapsed" | "standard" | "split";
 
@@ -138,3 +137,69 @@ const modes: ModesOptions[] = ["compact", "collapsed", "standard", "split"];
     updateImages(modeOrder[parseInt(slider.value)]);
   });
 </script>
+
+<style>
+  @tailwind base;
+
+  @layer base {
+    section {
+      @apply grid w-full grid-cols-1 justify-center xl:grid-cols-[1fr_2fr] xl:gap-8;
+    }
+
+    section > div {
+      @apply flex flex-col gap-md rounded-lg p-6;
+    }
+
+    label {
+      @apply flex cursor-pointer items-center gap-3 rounded-md p-3 transition-colors hover:bg-gray-100;
+    }
+
+    label span {
+      @apply text-lg;
+    }
+
+    input[type="radio"] {
+      @apply h-4 w-4 text-secondary focus:ring-secondary;
+    }
+
+    #image-container {
+      @apply relative aspect-[1.55/1] overflow-clip rounded-lg;
+    }
+
+    #image-wrapper {
+      @apply absolute inset-0 flex flex-row transition-transform duration-300 ease-in-out xl:flex-col;
+    }
+
+    img {
+      @apply aspect-[1.55/1] bg-[#272626] object-cover;
+    }
+
+    #radio-group {
+      @apply hidden flex-col xl:flex;
+    }
+
+    #carousel-indicators {
+      @apply -xl:bottom-4 -xl:left-1/2 absolute flex -translate-x-1/2 transform gap-2 xl:top-1/2 xl:right-4 xl:-translate-y-1/2 xl:flex-col;
+    }
+
+    .indicator {
+      @apply h-3 w-3 cursor-pointer rounded-full bg-secondary bg-opacity-50 transition-all duration-300 ease-in-out;
+    }
+
+    .indicator.active {
+      @apply w-8 bg-opacity-100 xl:h-8 xl:w-3;
+    }
+
+    #slider-container {
+      @apply grid w-full max-w-xl grid-cols-[auto_1fr_auto] gap-md place-self-center xl:hidden;
+    }
+
+    #view-slider {
+      @apply w-full;
+    }
+
+    #slider-labels {
+      @apply text-xs;
+    }
+  }
+</style>
diff --git a/src/components/how-much/styles.css b/src/components/how-much/styles.css
deleted file mode 100644
index a4f5f51..0000000
--- a/src/components/how-much/styles.css
+++ /dev/null
@@ -1,64 +0,0 @@
-@tailwind base;
-
-@layer base {
-  section {
-    @apply grid w-full grid-cols-1 justify-center xl:gap-8 xl:grid-cols-[1fr_2fr];
-  }
-
-  section>div {
-    @apply flex flex-col gap-md rounded-lg p-6;
-  }
-
-  label {
-    @apply flex cursor-pointer items-center gap-3 rounded-md p-3 transition-colors hover:bg-gray-100;
-  }
-
-  label span {
-    @apply text-lg;
-  }
-
-  input[type="radio"] {
-    @apply h-4 w-4 text-secondary focus:ring-secondary;
-  }
-
-  #image-container {
-    @apply relative aspect-[1.55/1] overflow-clip rounded-lg;
-  }
-
-  #image-wrapper {
-    @apply absolute inset-0 transition-transform duration-300 ease-in-out flex flex-row xl:flex-col;
-  }
-
-  img {
-    @apply aspect-[1.55/1] object-cover bg-[#272626];
-  }
-
-  #radio-group {
-    @apply hidden flex-col xl:flex;
-  }
-
-  #carousel-indicators {
-    @apply absolute -xl:bottom-4 -xl:left-1/2 transform -translate-x-1/2 flex gap-2 xl:top-1/2 xl:right-4 xl:-translate-y-1/2 xl:flex-col;
-  }
-
-  .indicator {
-    @apply h-3 w-3 cursor-pointer rounded-full bg-secondary bg-opacity-50 transition-all duration-300 ease-in-out;
-  }
-
-  .indicator.active {
-    @apply w-8 xl:h-8 xl:w-3 bg-opacity-100;
-  }
-
-  #slider-container {
-    @apply w-full xl:hidden grid grid-cols-[auto_1fr_auto] gap-md max-w-xl place-self-center;
-  }
-
-  #view-slider {
-    @apply w-full;
-  }
-
-  #slider-labels {
-    @apply text-xs;
-  }
-
-}
\ No newline at end of file