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 && (