chore: divide width by 3

Author: SamVerschueren

docs/tutorialkit.dev/src/content/docs/reference/theming.mdx

@@ -4,6 +4,7 @@ description: 'How to theme TutorialKit'
 ---
 import { Image } from 'astro:assets';
 import themingContent from './images/theming-content.png';
+import themingCallout from './images/theming-callout.png';
 import themingPanelHeader from './images/theming-panel-header.png';
 import themingFiletree from './images/theming-filetree.png';
 import themingFiletreeFile from './images/theming-filetree-file.png';
@@ -46,7 +47,7 @@ These tokens can be used to style the colors of the tutorial on a high level. Fo
 
 The content refers to the main part of the lesson that contains the text and images.
 
-<Image src={themingContent} alt="Content" />
+<Image src={themingContent} alt="Content" width="686" />
 
 | Token                                    | Description                               |
 | ---------------------------------------- | ----------------------------------------- |
@@ -59,7 +60,7 @@ Callouts are visual elements used to draw attention to specific information or p
 
 For instanceof, here's an example of an info callout.
 
-![Callout](./images/theming-callout.png)
+<Image src={themingCallout} alt="Callout" width="621" />
 
 #### Tip
 
@@ -196,7 +197,7 @@ Panels are containers which can be resized and can hold different kind of compon
 
 The panel header is the top part of the panel that contains the title, an icon, and optionally an action button.
 
-<Image src={themingPanelHeader} alt="Panel Header" width="513" />
+<Image src={themingPanelHeader} alt="Panel Header" width="342" />
 
 | Token                                        | Description                          |
 | -------------------------------------------- | ------------------------------------ |
@@ -242,7 +243,7 @@ The button in the header is shown at the right side of the header of the panel.
 
 The file tree shows the relevant files of the lesson next to the text editor.
 
-<Image src={themingFiletree} alt="File Tree" width="425" />
+<Image src={themingFiletree} alt="File Tree" width="283" />
 
 | Token                                         | Description                                                            |
 | --------------------------------------------- | ---------------------------------------------------------------------- |
@@ -257,7 +258,7 @@ The file tree shows the relevant files of the lesson next to the text editor.
 
 You can customize the appearance of the files in the file tree using the following tokens.
 
-<Image src={themingFiletreeFile} alt="File Tree File" width="425" />
+<Image src={themingFiletreeFile} alt="File Tree File" width="283" />
 
 
 | Token                                                 | Description                                          |
@@ -276,7 +277,7 @@ You can customize the appearance of the files in the file tree using the followi
 
 You can customize the appearance of the folders in the file tree using the following tokens.
 
-<Image src={themingFileTreeFolder} alt="File Tree Folder" width="425" />
+<Image src={themingFileTreeFolder} alt="File Tree Folder" width="283" />
 
 | Token                                                | Description                                            |
 | ---------------------------------------------------- | ------------------------------------------------------ |