fix: Guide formatting

frontend/src/pages/GuidePage/components/GuideScreenshot.tsx

@@ -1,19 +1,28 @@
+type GuideScreenshotSize = 'wide' | 'narrow';
+
 interface GuideScreenshotProps {
   src: string;
   alt: string;
   caption?: string;
   mobile?: boolean;
+  size?: GuideScreenshotSize;
 }
 
-export const GuideScreenshot = ({ src, alt, caption, mobile }: GuideScreenshotProps) => {
+const SIZE_CLASS: Record<GuideScreenshotSize, string> = {
+  wide: 'max-w-4xl',
+  narrow: 'max-w-lg',
+};
+
+export const GuideScreenshot = ({ src, alt, caption, mobile, size = 'wide' }: GuideScreenshotProps) => {
+  const widthClass = mobile ? 'max-w-[375px]' : SIZE_CLASS[size];
   return (
-    <figure className={`my-6 ${mobile ? 'max-w-[375px]' : 'max-w-4xl'} mx-auto`}>
+    <figure className={`my-6 ${widthClass} mx-auto`}>
       <div className="rounded-lg overflow-hidden border border-white/10 shadow-lg shadow-black/20">
         <img
           src={src}
           alt={alt}
           loading="lazy"
-          className="w-full h-auto"
+          className="max-w-full h-auto"
         />
       </div>
       {caption && (

frontend/src/pages/GuidePage/sections/GettingStartedSection.tsx

@@ -35,6 +35,7 @@ export const GettingStartedSection = () => {
           src="/guide/signup-desktop.png"
           alt="Sign Up page with registration form"
           caption="The Sign Up form with email, password, and terms & conditions fields"
+          size="narrow"
         />
 
         <p className="text-titanio/70 leading-relaxed mb-4">
@@ -69,6 +70,7 @@ export const GettingStartedSection = () => {
           src="/guide/login-desktop.png"
           alt="Login page showing email and password entry"
           caption="The secure Auth0 login page"
+          size="narrow"
         />
 
         <p className="text-titanio/70 leading-relaxed mb-4">