diff --git a/src/components/Content.tsx b/src/components/Content.tsx
index 1356fa26..cf1ddf96 100644
--- a/src/components/Content.tsx
+++ b/src/components/Content.tsx
@@ -2,7 +2,7 @@ import type { JSX, RenderableProps } from "preact";
 
 export function Content({ children }: RenderableProps<unknown>): JSX.Element {
   return (
-    <article class="prose prose-lg max-w-none bg-slate-200 px-40 py-10 dark:prose-invert prose-headings:flex prose-headings:flex-row prose-headings:items-center dark:bg-slate-800">
+    <article class="prose prose-lg max-w-none bg-slate-200 px-10 md:px-20 lg:px-40 py-10 dark:prose-invert prose-headings:flex prose-headings:flex-row prose-headings:items-center dark:bg-slate-800">
       {children}
     </article>
   );